Embed Size (px)
Citation preview
JavaScript Object Model
Biggest Advantage of JavaScript
I can access values of HTML elements using JavaScript
I can modify values of HTML elements using JavaScript
Disadvantage of JavaScript
Each browser has its own document object Model
Initial JavaScript Object Model
New JavaScript Object Model
New Properties added in Latest JavaScript Model
all[] Children[] className innerHTML innterText outerHTML outerText
New Properties added in Latest JavaScript Model
parentElement style tagName
New methods added in Latest JavaScript Model
Click() getAttribute() insertAdjacentHTML() insertAdjacentText() setAttribute() removeAttribute()
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
How to use these Object Model
We have been doing this in our previous lecture, but I will take few more examples now.
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 />
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
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 />");
}
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
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 />");
}
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)
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.
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.
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>
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]
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.
2nd Method of accessing elements
By using name attribute of elements.
(We discussed this with forms and anchors and links)
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.
3rd method of accessing elements
Using getElementById() Element that we want to access
must have its id attribute defined
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”;
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.
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
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>
How many tags are there
document.all.length, returns the number of tag in the web page.
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>
Output
Total number of tags: 16
HTMLHEADTITLEBODYH1HRPEMEMPEMPEMEMHRSCRIPT
Final Note
We will learn about more JavaScript Object introduced by new browsers in next chapter.
