Document Object Model (DOM)
description
Transcript of Document Object Model (DOM)
![Page 1: Document Object Model (DOM)](https://reader036.fdocuments.in/reader036/viewer/2022062315/56814e67550346895dbc05cf/html5/thumbnails/1.jpg)
LOGO
Document Object Model (DOM)Computer Science & Engineering
![Page 2: Document Object Model (DOM)](https://reader036.fdocuments.in/reader036/viewer/2022062315/56814e67550346895dbc05cf/html5/thumbnails/2.jpg)
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
![Page 3: Document Object Model (DOM)](https://reader036.fdocuments.in/reader036/viewer/2022062315/56814e67550346895dbc05cf/html5/thumbnails/3.jpg)
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
![Page 4: Document Object Model (DOM)](https://reader036.fdocuments.in/reader036/viewer/2022062315/56814e67550346895dbc05cf/html5/thumbnails/4.jpg)
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
![Page 5: Document Object Model (DOM)](https://reader036.fdocuments.in/reader036/viewer/2022062315/56814e67550346895dbc05cf/html5/thumbnails/5.jpg)
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
![Page 6: Document Object Model (DOM)](https://reader036.fdocuments.in/reader036/viewer/2022062315/56814e67550346895dbc05cf/html5/thumbnails/6.jpg)
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
![Page 7: Document Object Model (DOM)](https://reader036.fdocuments.in/reader036/viewer/2022062315/56814e67550346895dbc05cf/html5/thumbnails/7.jpg)
LOGO
Computer Science & Engineering
ARRAY OBJECT
Array Object Methods
csehui.wordpress.com
![Page 8: Document Object Model (DOM)](https://reader036.fdocuments.in/reader036/viewer/2022062315/56814e67550346895dbc05cf/html5/thumbnails/8.jpg)
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
![Page 9: Document Object Model (DOM)](https://reader036.fdocuments.in/reader036/viewer/2022062315/56814e67550346895dbc05cf/html5/thumbnails/9.jpg)
LOGO
Computer Science & Engineering
DATE OBJECT
Date Object Methods
csehui.wordpress.com
![Page 10: Document Object Model (DOM)](https://reader036.fdocuments.in/reader036/viewer/2022062315/56814e67550346895dbc05cf/html5/thumbnails/10.jpg)
LOGO
Computer Science & Engineering
DATE OBJECT
Date Object Methods
csehui.wordpress.com
![Page 11: Document Object Model (DOM)](https://reader036.fdocuments.in/reader036/viewer/2022062315/56814e67550346895dbc05cf/html5/thumbnails/11.jpg)
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
![Page 12: Document Object Model (DOM)](https://reader036.fdocuments.in/reader036/viewer/2022062315/56814e67550346895dbc05cf/html5/thumbnails/12.jpg)
LOGO
Computer Science & Engineering
MATH OBJECT
Math Object Methods
csehui.wordpress.com
![Page 13: Document Object Model (DOM)](https://reader036.fdocuments.in/reader036/viewer/2022062315/56814e67550346895dbc05cf/html5/thumbnails/13.jpg)
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
![Page 14: Document Object Model (DOM)](https://reader036.fdocuments.in/reader036/viewer/2022062315/56814e67550346895dbc05cf/html5/thumbnails/14.jpg)
LOGO
Computer Science & Engineering
MATH OBJECT
String Object Methods
csehui.wordpress.com
![Page 15: Document Object Model (DOM)](https://reader036.fdocuments.in/reader036/viewer/2022062315/56814e67550346895dbc05cf/html5/thumbnails/15.jpg)
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
![Page 16: Document Object Model (DOM)](https://reader036.fdocuments.in/reader036/viewer/2022062315/56814e67550346895dbc05cf/html5/thumbnails/16.jpg)
LOGO
Computer Science & Engineering
FORM OBJECT
Form Object Properties
csehui.wordpress.com
![Page 17: Document Object Model (DOM)](https://reader036.fdocuments.in/reader036/viewer/2022062315/56814e67550346895dbc05cf/html5/thumbnails/17.jpg)
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
![Page 18: Document Object Model (DOM)](https://reader036.fdocuments.in/reader036/viewer/2022062315/56814e67550346895dbc05cf/html5/thumbnails/18.jpg)
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
![Page 19: Document Object Model (DOM)](https://reader036.fdocuments.in/reader036/viewer/2022062315/56814e67550346895dbc05cf/html5/thumbnails/19.jpg)
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
![Page 20: Document Object Model (DOM)](https://reader036.fdocuments.in/reader036/viewer/2022062315/56814e67550346895dbc05cf/html5/thumbnails/20.jpg)
LOGO
Computer Science & Engineering
FORM OBJECT
Button Object Properties
csehui.wordpress.com
![Page 21: Document Object Model (DOM)](https://reader036.fdocuments.in/reader036/viewer/2022062315/56814e67550346895dbc05cf/html5/thumbnails/21.jpg)
LOGO
Computer Science & Engineering
FORM OBJECT
Button Object Methods
csehui.wordpress.com
![Page 22: Document Object Model (DOM)](https://reader036.fdocuments.in/reader036/viewer/2022062315/56814e67550346895dbc05cf/html5/thumbnails/22.jpg)
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
![Page 23: Document Object Model (DOM)](https://reader036.fdocuments.in/reader036/viewer/2022062315/56814e67550346895dbc05cf/html5/thumbnails/23.jpg)
LOGO
Computer Science & Engineering
FORM OBJECT
Select Object Properties
csehui.wordpress.com
![Page 24: Document Object Model (DOM)](https://reader036.fdocuments.in/reader036/viewer/2022062315/56814e67550346895dbc05cf/html5/thumbnails/24.jpg)
LOGO
Computer Science & Engineering
FORM OBJECT
Select Object Methods
csehui.wordpress.com
![Page 25: Document Object Model (DOM)](https://reader036.fdocuments.in/reader036/viewer/2022062315/56814e67550346895dbc05cf/html5/thumbnails/25.jpg)
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
![Page 26: Document Object Model (DOM)](https://reader036.fdocuments.in/reader036/viewer/2022062315/56814e67550346895dbc05cf/html5/thumbnails/26.jpg)
LOGO
Computer Science & Engineering
FORM OBJECT
Radio Object Properties
csehui.wordpress.com
![Page 27: Document Object Model (DOM)](https://reader036.fdocuments.in/reader036/viewer/2022062315/56814e67550346895dbc05cf/html5/thumbnails/27.jpg)
LOGO
Computer Science & Engineering
FORM OBJECT
Radio Object Methods
csehui.wordpress.com
![Page 28: Document Object Model (DOM)](https://reader036.fdocuments.in/reader036/viewer/2022062315/56814e67550346895dbc05cf/html5/thumbnails/28.jpg)
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
![Page 29: Document Object Model (DOM)](https://reader036.fdocuments.in/reader036/viewer/2022062315/56814e67550346895dbc05cf/html5/thumbnails/29.jpg)
LOGO
Computer Science & Engineering
FORM OBJECT
Text Object Properties
csehui.wordpress.com
![Page 30: Document Object Model (DOM)](https://reader036.fdocuments.in/reader036/viewer/2022062315/56814e67550346895dbc05cf/html5/thumbnails/30.jpg)
LOGO
Computer Science & Engineering
FORM OBJECT
Text Object Methods
Ex: <script type="text/javascript">function setFocus()
{ document.getElementById('text1').focus() }
function loseFocus() {
document.getElementById('text1').blur() }
</script>csehui.wordpress.com