Document Object Model (DOM)

LOGO

Document Object Model (DOM)Computer Science & Engineering

LOGO

Computer Science & Engineering

HTML DOM

The Document Object Model is a platform- and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents.

csehui.wordpress.com

window

event frame screenhistorydocument location navigator

form

document

anchor imageapplet layerclass linkelement plug-inembeb styleID tagbutton reset

check box selecthidden submitpassword textradio textarea

LOGO


CREATING OBJECTS

Define the function:function ObjectName(List Parameter){

this.property1= Parameter1;this.property2= Parameter2;…this.method1=functionName1;this.method2=functionName2;…

}


LOGO


CREATING OBJECTS

To call object we use the keyword new.Exemple:

function myobject() {

this.containedValue = 0; this.othercontainedValue = 0; this.anothercontainedValue = 0;

} var mything = new myobject();


LOGO


ARRAY OBJECT

Array: An array is a special variable, which can hold more than one value, at a time.

An array can be defined in three ways: var myCars=new Array();

myCars[0]="Saab"; myCars[1]="Volvo";myCars[2]="BMW";

var myCars=new Array("Saab","Volvo","BMW");

var myCars=["Saab","Volvo","BMW"];


LOGO


ARRAY OBJECT

Array Object Properties

Ex:var fruits = ["Banana", "Orange", "Apple",

"Mango"];document.write("Original length: " +

fruits.length);


LOGO


ARRAY OBJECT

Array Object Methods


LOGO


DATE OBJECT

Date Object: The Date object is used to work with dates and times. Date objects are created with new

Date(). There are four ways of instantiating a

date:var d = new Date();var d = new Date(milliseconds);var d = new Date(dateString);var d = new Date(year, month, day, hours, minutes, seconds, milliseconds);


LOGO


DATE OBJECT

Date Object Methods


LOGO


DATE OBJECT

Date Object Methods


LOGO


MATH OBJECT

The Math object allows you to perform mathematical tasks.

Math is not a constructor. All properties/methods of Math can be called by using Math as an object, without creating it.

Ex:var x = Math.PI; // Returns PIvar y = Math.sqrt(16); // Returns the

square root of 16


LOGO


MATH OBJECT

Math Object Methods


LOGO


STRING OBJECT

String: The String object is used to manipulate

a stored piece of text. String objects are created with new

String().Syntax

var txt = new String(string);


LOGO


MATH OBJECT

String Object Methods


LOGO


FORM OBJECT

Form: The Form object represents an HTML

form. For each instance of a <form> tag in an

HTML document, a Form object is created.

Form Object Methods


LOGO


FORM OBJECT

Form Object Properties


LOGO


FORM OBJECT

Form elements Collection The elements collection returns an array

containing each element in the form.Syntax

formObject.elements[].property.


LOGO


FORM OBJECT

EX:<form id="myForm">

Firstname: <input id="fname" type="text" value="Mickey" />Lastname: <input id="lname" type="text" value="Mouse" /><input id="sub" type="button" value="Submit" />

</form><p>Get the value of all the elements in the form:<br /><script type="text/javascript">var x=document.getElementById("myForm");for (var i=0;i<x.length;i++) { document.write(x.elements[i].value); document.write("<br />"); }</script></p>csehui.wordpress.com

LOGO


FORM OBJECT

Button Object: The Button object represents a button in an HTML form.

For each instance of an <input type="button"> tag in an HTML form, a Button object is created.

You can access a button by searching through the elements[] array of the form, or by using document.getElementById().


LOGO


FORM OBJECT

Button Object Properties


LOGO


FORM OBJECT

Button Object Methods


LOGO


FORM OBJECT

Select Object The Select object represents a dropdown

list in an HTML form. For each instance of an HTML <select>

tag in a form, a Select object is created. You can access a Select object by

searching through the elements[] array of the form, or by using document.getElementById().


LOGO


FORM OBJECT

Select Object Properties


LOGO


FORM OBJECT

Select Object Methods


LOGO


FORM OBJECT

Radio Object The Radio object represents a radio

button in an HTML form. For each instance of an <input

type="radio"> tag in an HTML form, a Radio object is created.

You can access a radio object by searching through the elements[] array of the form, or by using document.getElementById().


LOGO


FORM OBJECT

Radio Object Properties


LOGO


FORM OBJECT

Radio Object Methods


LOGO


FORM OBJECT

Text Object The Text object represents a text-input

field in an HTML form. For each instance of an <input

type="text"> tag in an HTML form, a Text object is created.

You can access a text-input field by searching through the elements[] array of the form, or by using document.getElementById().


LOGO


FORM OBJECT

Text Object Properties


LOGO


FORM OBJECT

Text Object Methods

Ex: <script type="text/javascript">function setFocus()

{ document.getElementById('text1').focus() }

function loseFocus() {

document.getElementById('text1').blur() }

</script>csehui.wordpress.com

Documents

Document Object Model (DOM)