Document Object Model (DOM)

Document Object Model (DOM)
Computer Science & Engineering

LOGO


LOGO

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.
window

document

event

frame

history

location

navigator

screen

document

form
button
check box
hidden
password
radio

csehui.wordpress.com

reset
select
submit
text
textarea

anchor
applet
class
element
embeb
ID

image
layer
link
plug-in
style
tag

Computer Science & Engineering


LOGO

CREATING OBJECTS
Define the function:
function ObjectName(List Parameter)
{
this.property1= Parameter1;
this.property2= Parameter2;
…
this.method1=functionName1;
this.method2=functionName2;
…
}
csehui.wordpress.com

Computer Science & Engineering


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();

csehui.wordpress.com

Computer Science & Engineering


ARRAY OBJECT

LOGO

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"];

csehui.wordpress.com

Computer Science & Engineering


ARRAY OBJECT

LOGO

Array Object Properties

Ex:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.write("Original length: " + fruits.length);

csehui.wordpress.com

Computer Science & Engineering


ARRAY OBJECT

LOGO

Array Object Methods

csehui.wordpress.com

Computer Science & Engineering


DATE OBJECT

LOGO

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);

csehui.wordpress.com

Computer Science & Engineering


DATE OBJECT

LOGO

Date Object Methods

csehui.wordpress.com

Computer Science & Engineering


DATE OBJECT

LOGO

Date Object Methods

csehui.wordpress.com

Computer Science & Engineering


MATH OBJECT

LOGO

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 PI
var y = Math.sqrt(16); // Returns the square root
of 16

csehui.wordpress.com

Computer Science & Engineering


MATH OBJECT

LOGO

Math Object Methods

csehui.wordpress.com

Computer Science & Engineering


STRING OBJECT

LOGO

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);

csehui.wordpress.com

Computer Science & Engineering


MATH OBJECT

LOGO

String Object Methods

csehui.wordpress.com

Computer Science & Engineering


FORM OBJECT

LOGO

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

csehui.wordpress.com

Computer Science & Engineering


FORM OBJECT

LOGO

Form Object Properties

csehui.wordpress.com

Computer Science & Engineering


FORM OBJECT

LOGO

Form elements Collection
 The elements collection returns an array
containing each element in the form.
Syntax
 formObject.elements[].property.

csehui.wordpress.com

Computer Science & Engineering


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>

Get the value of all the elements in the form:

<script type="text/javascript">
var x=document.getElementById("myForm");
for (var i=0;i{
document.write(x.elements[i].value);

document.write("
");
}
</script>

csehui.wordpress.com

Computer Science & Engineering


FORM OBJECT

LOGO

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().

csehui.wordpress.com

Computer Science & Engineering


FORM OBJECT

LOGO

Button Object Properties

csehui.wordpress.com

Computer Science & Engineering


FORM OBJECT

LOGO

Button Object Methods

csehui.wordpress.com

Computer Science & Engineering


FORM OBJECT

LOGO

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().

csehui.wordpress.com

Computer Science & Engineering


FORM OBJECT

LOGO

Select Object Properties

csehui.wordpress.com

Computer Science & Engineering


FORM OBJECT

LOGO

Select Object Methods

csehui.wordpress.com

Computer Science & Engineering


FORM OBJECT

LOGO

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().

csehui.wordpress.com

Computer Science & Engineering