logo document object model (dom)document object model (dom) computer science & engineering
Post on 22-Dec-2015
231 views
TRANSCRIPT
LOGO
Computer Science & Engineering
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
window
event frame screenhistorydocument location navigator
form
document
anchor imageapplet layerclass linkelement plug-inembeb styleID tagbutton reset
check box selecthidden submitpassword textradio textarea
LOGO
Computer Science & Engineering
CREATING OBJECTS
Define the function:function ObjectName(List Parameter){
this.property1= Parameter1;this.property2= Parameter2;…this.method1=functionName1;this.method2=functionName2;…
}
csehui.wordpress.com
LOGO
Computer Science & Engineering
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
LOGO
Computer Science & Engineering
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
LOGO
Computer Science & Engineering
ARRAY OBJECT
Array Object Properties
Ex:var fruits = ["Banana", "Orange", "Apple",
"Mango"];document.write("Original length: " +
fruits.length);
csehui.wordpress.com
LOGO
Computer Science & Engineering
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
LOGO
Computer Science & Engineering
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 PIvar y = Math.sqrt(16); // Returns the
square root of 16
csehui.wordpress.com
LOGO
Computer Science & Engineering
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
LOGO
Computer Science & Engineering
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
LOGO
Computer Science & Engineering
FORM OBJECT
Form elements Collection The elements collection returns an array
containing each element in the form.Syntax
formObject.elements[].property.
csehui.wordpress.com
LOGO
Computer Science & Engineering
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
LOGO
Computer Science & Engineering
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
LOGO
Computer Science & Engineering
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
LOGO
Computer Science & Engineering
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
LOGO
Computer Science & Engineering
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