Document Object Model (DOM) - … · HTML DOM LOGO The Document Object Model is a platform- and...
-
Upload
duongxuyen -
Category
Documents
-
view
229 -
download
0
Transcript of Document Object Model (DOM) - … · HTML DOM LOGO The Document Object Model is a platform- and...
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;
…
}
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
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"];
csehui.wordpress.com Computer Science & Engineering
LOGO
ARRAY OBJECT
Array Object Properties
Ex:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.write("Original length: " + fruits.length);
csehui.wordpress.com Computer Science & Engineering
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);
csehui.wordpress.com Computer Science & Engineering
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
csehui.wordpress.com Computer Science & Engineering
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);
csehui.wordpress.com Computer Science & Engineering
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
csehui.wordpress.com Computer Science & Engineering
LOGO
FORM OBJECT
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> <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>
csehui.wordpress.com Computer Science & Engineering
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().
csehui.wordpress.com Computer Science & Engineering
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().
csehui.wordpress.com Computer Science & Engineering
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().
csehui.wordpress.com Computer Science & Engineering
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().
csehui.wordpress.com Computer Science & Engineering