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