Bài giảng Thiết kế web Dreamweaver CS4 - Chapter 10: Document Object Model (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. In this chapter we will learn with Document Object Model, inviting you to refer.

Document Object Model (DOM)

HTML DOM

language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of

password text

CREATING OBJECTS

Define the function:

function ObjectName(List Parameter) {

this.property1= Parameter1;

this.property2= Parameter2;

… this.method1=functionName1;

this.method2=functionName2;

… }

ARRAY OBJECT

Array: An array is a special variable, which can

hold more than one value, at a time

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

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

mathematical tasks

of Math can be called by using Math as an object, without creating it

var x = Math.PI; // Returns PI

var y = Math.sqrt(16); // Returns the square root of

16

MATH OBJECT

Math Object Methods

MATH OBJECT

String Object Methods

FORM OBJECT

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

containing each element in the form

Syntax

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

elements[] array of the form, or by using

document.getElementById()

FORM OBJECT

Button Object Properties

FORM OBJECT

Button Object Methods

FORM OBJECT

Select Object

an HTML form

form, a Select object is created

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

FORM OBJECT

Select Object Properties

FORM OBJECT

Select Object Methods

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

FORM OBJECT

Radio Object Properties

FORM OBJECT

Radio Object Methods

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

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

FORM OBJECT

Text Object Properties

FORM OBJECT

Text Object Methods

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

</script>