Document Object Model (DOM) - … · HTML DOM LOGO The Document Object Model is a platform- and language-neutral interface that will allow programs and scripts to dynamically access

LOGO

Document Object Model (DOM)

Computer Science & Engineering

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.

csehui.wordpress.com Computer Science & Engineering

window

event frame screen history document location navigator

form

document

anchor image applet layer class link element plug-in embeb style ID tag

button reset check box select hidden submit

password text radio 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 PI

var 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>


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>


Documents

Document Object Model (DOM) - … · HTML DOM LOGO The Document Object Model is a platform- and language-neutral interface that will allow programs and scripts to dynamically access