![Page 1: JavaScript Object Model. Biggest Advantage of JavaScript I can access values of HTML elements using JavaScript I can modify values of HTML elements](https://reader034.vdocument.in/reader034/viewer/2022042619/5a4d1b627f8b9ab0599adefd/html5/thumbnails/1.jpg)
JavaScript Object Model
![Page 2: JavaScript Object Model. Biggest Advantage of JavaScript I can access values of HTML elements using JavaScript I can modify values of HTML elements](https://reader034.vdocument.in/reader034/viewer/2022042619/5a4d1b627f8b9ab0599adefd/html5/thumbnails/2.jpg)
Biggest Advantage of JavaScript
I can access values of HTML elements using JavaScript
I can modify values of HTML elements using JavaScript
![Page 3: JavaScript Object Model. Biggest Advantage of JavaScript I can access values of HTML elements using JavaScript I can modify values of HTML elements](https://reader034.vdocument.in/reader034/viewer/2022042619/5a4d1b627f8b9ab0599adefd/html5/thumbnails/3.jpg)
Disadvantage of JavaScript
Each browser has its own document object Model
![Page 4: JavaScript Object Model. Biggest Advantage of JavaScript I can access values of HTML elements using JavaScript I can modify values of HTML elements](https://reader034.vdocument.in/reader034/viewer/2022042619/5a4d1b627f8b9ab0599adefd/html5/thumbnails/4.jpg)
Initial JavaScript Object Model
![Page 5: JavaScript Object Model. Biggest Advantage of JavaScript I can access values of HTML elements using JavaScript I can modify values of HTML elements](https://reader034.vdocument.in/reader034/viewer/2022042619/5a4d1b627f8b9ab0599adefd/html5/thumbnails/5.jpg)
New JavaScript Object Model
![Page 6: JavaScript Object Model. Biggest Advantage of JavaScript I can access values of HTML elements using JavaScript I can modify values of HTML elements](https://reader034.vdocument.in/reader034/viewer/2022042619/5a4d1b627f8b9ab0599adefd/html5/thumbnails/6.jpg)
New Properties added in Latest JavaScript Model
all[] Children[] className innerHTML innterText outerHTML outerText
![Page 7: JavaScript Object Model. Biggest Advantage of JavaScript I can access values of HTML elements using JavaScript I can modify values of HTML elements](https://reader034.vdocument.in/reader034/viewer/2022042619/5a4d1b627f8b9ab0599adefd/html5/thumbnails/7.jpg)
New Properties added in Latest JavaScript Model
parentElement style tagName
![Page 8: JavaScript Object Model. Biggest Advantage of JavaScript I can access values of HTML elements using JavaScript I can modify values of HTML elements](https://reader034.vdocument.in/reader034/viewer/2022042619/5a4d1b627f8b9ab0599adefd/html5/thumbnails/8.jpg)
New methods added in Latest JavaScript Model
Click() getAttribute() insertAdjacentHTML() insertAdjacentText() setAttribute() removeAttribute()
![Page 9: JavaScript Object Model. Biggest Advantage of JavaScript I can access values of HTML elements using JavaScript I can modify values of HTML elements](https://reader034.vdocument.in/reader034/viewer/2022042619/5a4d1b627f8b9ab0599adefd/html5/thumbnails/9.jpg)
Difference between Initial Model and New model
Slide No. 7 and 9 shows the new methods and new properties
Slide no.5 blue circles shows the new objects added in Latest JavaScript Model
![Page 10: JavaScript Object Model. Biggest Advantage of JavaScript I can access values of HTML elements using JavaScript I can modify values of HTML elements](https://reader034.vdocument.in/reader034/viewer/2022042619/5a4d1b627f8b9ab0599adefd/html5/thumbnails/10.jpg)
How to use these Object Model
We have been doing this in our previous lecture, but I will take few more examples now.
![Page 11: JavaScript Object Model. Biggest Advantage of JavaScript I can access values of HTML elements using JavaScript I can modify values of HTML elements](https://reader034.vdocument.in/reader034/viewer/2022042619/5a4d1b627f8b9ab0599adefd/html5/thumbnails/11.jpg)
Sample Code <body bgcolor="white" text="green" link="red" alink="#ffff00">
<h1 align="center">Test Document</h1>
<hr />
<a href="http://www.pint.com/">Sample link</a>
<a name="anchor1"></a>
<a name="anchor2" href="http://www.javascriptref.com">Sample link 2</a>
<form name="form1" action="#" method="get"></form>
<form name="form2" action="#" method="get"></form>
<hr />
<br /><br />
![Page 12: JavaScript Object Model. Biggest Advantage of JavaScript I can access values of HTML elements using JavaScript I can modify values of HTML elements](https://reader034.vdocument.in/reader034/viewer/2022042619/5a4d1b627f8b9ab0599adefd/html5/thumbnails/12.jpg)
How many Forms are there?
Use object forms[] document.forms[] is an array document.forms.length returns the
number of forms in the web page document.forms[0] is the first form, OR document.form1 is the first form document.forms[0].name returns the
name of first form i.e. form1
![Page 13: JavaScript Object Model. Biggest Advantage of JavaScript I can access values of HTML elements using JavaScript I can modify values of HTML elements](https://reader034.vdocument.in/reader034/viewer/2022042619/5a4d1b627f8b9ab0599adefd/html5/thumbnails/13.jpg)
Code to Access All Forms if (document.forms.length > 0)
{
document.write("<h2>Forms</h2>");
document.write("# Forms = " + document.forms.length + "<br />");
for (i=0; i < document.forms.length; i++)
document.write("Forms["+i+"]=" + document.forms[i].name + "<br />");
}
![Page 14: JavaScript Object Model. Biggest Advantage of JavaScript I can access values of HTML elements using JavaScript I can modify values of HTML elements](https://reader034.vdocument.in/reader034/viewer/2022042619/5a4d1b627f8b9ab0599adefd/html5/thumbnails/14.jpg)
How many anchors are there?
Use object anchors[] document.anchors[] is an array document.anchors.length returns the
number of anchors in the web page document.anchors[0] is the first
anchor, OR document.anchor1 is the first anchor
![Page 15: JavaScript Object Model. Biggest Advantage of JavaScript I can access values of HTML elements using JavaScript I can modify values of HTML elements](https://reader034.vdocument.in/reader034/viewer/2022042619/5a4d1b627f8b9ab0599adefd/html5/thumbnails/15.jpg)
Code to Access all anchors if (document.anchors.length > 0)
{
document.write("<h2>Anchors</h2>");
document.write("# Anchors = " + document.anchors.length + "<br />");
for (i=0; i < document.anchors.length; i++)
document.write("Anchors["+i+"]=" + document.anchors[i] + "<br />");
}
![Page 16: JavaScript Object Model. Biggest Advantage of JavaScript I can access values of HTML elements using JavaScript I can modify values of HTML elements](https://reader034.vdocument.in/reader034/viewer/2022042619/5a4d1b627f8b9ab0599adefd/html5/thumbnails/16.jpg)
How many links are there?
Use object links[] document.links[] is an array document.links.length returns the number
of links in the web page document.links[0] is the first link, OR document. name of link is the first link(In our example, we didn’t use any any
name for link)
![Page 17: JavaScript Object Model. Biggest Advantage of JavaScript I can access values of HTML elements using JavaScript I can modify values of HTML elements](https://reader034.vdocument.in/reader034/viewer/2022042619/5a4d1b627f8b9ab0599adefd/html5/thumbnails/17.jpg)
Other Properties document.bgColor - returns the background
color of web page document.fgColor – returns the foreground
color of web page. document.location – returns the location of
web page i.e URL document.URL – returns the URL of web
page document.title – returns the title of web
page.
![Page 18: JavaScript Object Model. Biggest Advantage of JavaScript I can access values of HTML elements using JavaScript I can modify values of HTML elements](https://reader034.vdocument.in/reader034/viewer/2022042619/5a4d1b627f8b9ab0599adefd/html5/thumbnails/18.jpg)
More properties document.alinkColor – returns the active link
color document.vlinkColor – returns the visited
link color. document.linkColor – returns the link color.
Slide 12-18 were based on oldest JavaScript Model.
![Page 19: JavaScript Object Model. Biggest Advantage of JavaScript I can access values of HTML elements using JavaScript I can modify values of HTML elements](https://reader034.vdocument.in/reader034/viewer/2022042619/5a4d1b627f8b9ab0599adefd/html5/thumbnails/19.jpg)
Sample Code <body>
<form action="#" method="get">
<input type="text" />
</form>
<br /><br />
<form action="#" method="get">
<input type="text" />
<br />
<input type="text" />
</form>
</body>
![Page 20: JavaScript Object Model. Biggest Advantage of JavaScript I can access values of HTML elements using JavaScript I can modify values of HTML elements](https://reader034.vdocument.in/reader034/viewer/2022042619/5a4d1b627f8b9ab0599adefd/html5/thumbnails/20.jpg)
Using elements[]
To access 1st form, I can write document.forms[0]
To access 2nd form, I can write document.forms[1]
To access 1st text box inside 2nd form document.forms[1].elements[0]
To access 2nd text box inside 1st form document.forms[1].elements[1]
![Page 21: JavaScript Object Model. Biggest Advantage of JavaScript I can access values of HTML elements using JavaScript I can modify values of HTML elements](https://reader034.vdocument.in/reader034/viewer/2022042619/5a4d1b627f8b9ab0599adefd/html5/thumbnails/21.jpg)
Using elements[]
elements can be radio button, text box, check box etc. Also called as form elements.
elements[] is defined inside forms[] , (Refer slide 4 and 5).
elements.length return the number of elements inside a particular form.
elements[0] refer to 1st element, elements[1] refer to 2nd element and so on.
![Page 22: JavaScript Object Model. Biggest Advantage of JavaScript I can access values of HTML elements using JavaScript I can modify values of HTML elements](https://reader034.vdocument.in/reader034/viewer/2022042619/5a4d1b627f8b9ab0599adefd/html5/thumbnails/22.jpg)
2nd Method of accessing elements
By using name attribute of elements.
(We discussed this with forms and anchors and links)
![Page 23: JavaScript Object Model. Biggest Advantage of JavaScript I can access values of HTML elements using JavaScript I can modify values of HTML elements](https://reader034.vdocument.in/reader034/viewer/2022042619/5a4d1b627f8b9ab0599adefd/html5/thumbnails/23.jpg)
2nd method of accessing elements
<form name="myForm" id="myForm" method="get" action="#">
<input type="text" name="userName" id="userName" />
</form>
document.myForm.userName refer to the text box inside form.
![Page 24: JavaScript Object Model. Biggest Advantage of JavaScript I can access values of HTML elements using JavaScript I can modify values of HTML elements](https://reader034.vdocument.in/reader034/viewer/2022042619/5a4d1b627f8b9ab0599adefd/html5/thumbnails/24.jpg)
3rd method of accessing elements
Using getElementById() Element that we want to access
must have its id attribute defined
![Page 25: JavaScript Object Model. Biggest Advantage of JavaScript I can access values of HTML elements using JavaScript I can modify values of HTML elements](https://reader034.vdocument.in/reader034/viewer/2022042619/5a4d1b627f8b9ab0599adefd/html5/thumbnails/25.jpg)
Example of getElementById
<body> <p id="p1"> this is a paragraph </p> <input type="button" value="Click"
onClick="butClick()"> </body>
pid = document.getElementById(“p1”); p1.align = “right”;
![Page 26: JavaScript Object Model. Biggest Advantage of JavaScript I can access values of HTML elements using JavaScript I can modify values of HTML elements](https://reader034.vdocument.in/reader034/viewer/2022042619/5a4d1b627f8b9ab0599adefd/html5/thumbnails/26.jpg)
document.getElementById
pid =getElementById(“p1”) Returns the reference of object
<p1>and store it in pid. pid.align = “right”
This will align the paragraph with id=p1 to the right
By Id we can get access to any element in the web page.
![Page 27: JavaScript Object Model. Biggest Advantage of JavaScript I can access values of HTML elements using JavaScript I can modify values of HTML elements](https://reader034.vdocument.in/reader034/viewer/2022042619/5a4d1b627f8b9ab0599adefd/html5/thumbnails/27.jpg)
document.all[]
document.all[] – return array of all html tags in the web page. i.e. document.all.length is the count of
number of tags in web page. document.all[0] returns the reference
of 1st tag. document.all[1] retuns the reference of
2nd tag. Introduced by Internet Explorer
![Page 28: JavaScript Object Model. Biggest Advantage of JavaScript I can access values of HTML elements using JavaScript I can modify values of HTML elements](https://reader034.vdocument.in/reader034/viewer/2022042619/5a4d1b627f8b9ab0599adefd/html5/thumbnails/28.jpg)
Example <body>
<h1>Example Heading</h1>
<hr />
<p>This is a <em>paragraph</em>. It is only a <em>paragraph.</em></p>
<p>Yet another <em>paragraph.</em></p>
<p>This final <em>paragraph</em> has <em id="special">special emphasis.</em></p>
<hr />
</body>
![Page 29: JavaScript Object Model. Biggest Advantage of JavaScript I can access values of HTML elements using JavaScript I can modify values of HTML elements](https://reader034.vdocument.in/reader034/viewer/2022042619/5a4d1b627f8b9ab0599adefd/html5/thumbnails/29.jpg)
How many tags are there
document.all.length, returns the number of tag in the web page.
![Page 30: JavaScript Object Model. Biggest Advantage of JavaScript I can access values of HTML elements using JavaScript I can modify values of HTML elements](https://reader034.vdocument.in/reader034/viewer/2022042619/5a4d1b627f8b9ab0599adefd/html5/thumbnails/30.jpg)
What are the name of tags
<script language="JavaScript"> var no = document.all.length; alert(no); for(i=0;i<no;i++)
document.write("<br>“ + document.all[i].tagName);
</script>
![Page 31: JavaScript Object Model. Biggest Advantage of JavaScript I can access values of HTML elements using JavaScript I can modify values of HTML elements](https://reader034.vdocument.in/reader034/viewer/2022042619/5a4d1b627f8b9ab0599adefd/html5/thumbnails/31.jpg)
Output
Total number of tags: 16
HTMLHEADTITLEBODYH1HRPEMEMPEMPEMEMHRSCRIPT
![Page 32: JavaScript Object Model. Biggest Advantage of JavaScript I can access values of HTML elements using JavaScript I can modify values of HTML elements](https://reader034.vdocument.in/reader034/viewer/2022042619/5a4d1b627f8b9ab0599adefd/html5/thumbnails/32.jpg)
Final Note
We will learn about more JavaScript Object introduced by new browsers in next chapter.