Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide


  1. 1. JavaScript Object Model
  2. 2. Biggest Advantage of JavaScript I can access values of HTML elements using JavaScript I can modify values of HTML elements using JavaScript
  3. 3. Disadvantage of JavaScript Each browser has its own document object Model
  4. 4. Initial JavaScript Object Model
  5. 5. New JavaScript Object Model
  6. 6. New Properties added in LatestJavaScript Model all[] Children[] className innerHTML innterText outerHTML outerText
  7. 7. New Properties added in LatestJavaScript Model parentElement style tagName
  8. 8. New methods added in LatestJavaScript Model Click() getAttribute() insertAdjacentHTML() insertAdjacentText() setAttribute() removeAttribute()
  9. 9. Difference between Initial Model andNew 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
  10. 10. How to use these Object Model We have been doing this in our previous lecture, but I will take few more examples now.
  11. 11.  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 />
  12. 12. 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
  13. 13. 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 />"); }
  14. 14. 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
  15. 15. 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 />"); }
  16. 16. 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)
  17. 17. 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.
  18. 18. 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.
  19. 19. 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>
  20. 20. 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]
  21. 21. 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.
  22. 22. 2nd Method of accessing elements By using name attribute of elements.(We discussed this with forms and anchors and links)
  23. 23. 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.
  24. 24. 3rd method of accessing elements Using getElementById() Element that we want to access must have its id attribute defined
  25. 25. 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”;
  26. 26. 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.
  27. 27. 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
  28. 28.  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>
  29. 29. How many tags are there document.all.length, returns the number of tag in the web page.
  30. 30. 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>
  31. 31. Output Total number of tags: 16 HTML HEAD TITLE BODY H1 HR P EM EM P EM P EM EM HR SCRIPT
  32. 32. Final Note We will learn about more JavaScript Object introduced by new browsers in next chapter.