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   Test Document   Sample link   Sample link 2 

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(" Forms ");  document.write("# Forms = " + document.forms.length + " ");  for (i=0; i < document.forms.length; i++)  document.write("Forms["+i+"]=" + document.forms[i].name + " ");  }

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(" Anchors ");  document.write("# Anchors = " + document.anchors.length + " ");  for (i=0; i < document.anchors.length; i++)  document.write("Anchors["+i+"]=" + document.anchors[i] + " ");  }

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 were based on oldest JavaScript Model.

Sample Code 

Using elements[]  To access 1 st form, I can write document.forms[0]  To access 2 nd form, I can write document.forms[1]  To access 1 st text box inside 2 nd form document.forms[1].elements[0]  To access 2 nd text box inside 1 st 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 1 st element, elements[1] refer to 2 nd element and so on.

2 nd Method of accessing elements  By using name attribute of elements. (We discussed this with forms and anchors and links)

2 nd method of accessing elements   document.myForm.userName refer to the text box inside form.

3 rd method of accessing elements  Using getElementById()  Element that we want to access must have its id attribute defined

Example of getElementById   this is a paragraph   pid = document.getElementById(“p1”);  p1.align = “right”;

document.getElementById  pid =getElementById(“p1”) Returns the reference of object 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 1 st tag. document.all[1] retuns the reference of 2 nd tag. Introduced by Internet Explorer

Example   Example Heading   This is a paragraph. It is only a paragraph.  Yet another paragraph.  This final paragraph has special emphasis. 

How many tags are there  document.all.length, returns the number of tag in the web page.

What are the name of tags   var no = document.all.length;  alert(no);  for(i=0;i<no;i++) document.write(" “ + document.all[i].tagName); 

Output Total number of tags: 16 HTML HEAD TITLE BODY H1 HR P EM EM P EM P EM EM HR SCRIPT

Final Note  We will learn about more JavaScript Object introduced by new browsers in next chapter.