Bài giảng Thiết kế web Dreamweaver CS4 - Chapter 10: Document Object Model (DOM)

Document Object Model (DOM)


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

document

form
button
check box
hidden
password
radio

reset

select
submit
text
textarea

anchor
applet
class
element
embeb
ID

image
layer
link
plug-in
style
tag

navigator

screen


CREATING OBJECTS
Define the function:
function ObjectName(List Parameter)
{
this.property1= Parameter1;
this.property2= Parameter2;

…
this.method1=functionName1;
this.method2=functionName2;
…
}


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


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


ARRAY OBJECT
Array Object Properties

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


ARRAY OBJECT
Array Object Methods


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);
csehui.wordpress.com

Computer Science & Engineering


DATE OBJECT
Date Object Methods


DATE OBJECT
Date Object Methods


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

MATH OBJECT
Math Object Methods


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


MATH OBJECT
String Object Methods


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


FORM OBJECT
Form Object Properties

FORM OBJECT
Form elements Collection
– The elements collection returns an array
containing each element in the form.
Syntax
– formObject.elements[].property.


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>

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


FORM OBJECT
Button Object Properties


FORM OBJECT
Button Object Methods


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

FORM OBJECT
Select Object Properties


FORM OBJECT
Select Object Methods


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