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

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

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

An array can be defined in three ways:

 var myCars=new Array();

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

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

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

 You can access a radio object by searching 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 Properties

FORM OBJECT

Text Object Methods