DOM Core, DOM HTML,  DOM CSS
Document Trees <ul><li>A web page can be represented as  Document Tree . </li></ul>
An Example of Document Tree <ul><li>Consider the Following Code </li></ul><ul><li><html> </li></ul><ul><li><head> </li></u...
An Example of Document Tree
An Example of Document Tree <ul><li>In Computer Science, A tree consist of NODES. </li></ul><ul><li>In the previous exampl...
2 nd  Example of Document Tree <ul><li><p> </li></ul><ul><li>A paragraph of <em>text</em> is just an example </li></ul><ul...
Second Example <ul><li>P  element has 3  children . </li></ul><ul><ul><li>Text node </li></ul></ul><ul><ul><li>EM element ...
Second Example <ul><li>Node 1 is  parent  of Node a, b, c. </li></ul><ul><li>Node b is  parent  of Node d. </li></ul><ul><...
DOM Node Properties <ul><li>A document tree consist of  nodes . </li></ul><ul><li>Each node has some  properties  associat...
Document Node Properties <ul><li>nodeName  – returns the name of node. </li></ul><ul><li>nodeValue  – returns the value of...
Document Node Properties <ul><li>lastChild  – returns the reference of last Child </li></ul><ul><li>previousSibling  – ret...
Example of Node Properties. <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><title>DOM Test</title> </li></ul><u...
Example of Node Properties. <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><title>DOM Test</title> </li></ul><u...
Example of Node Properties. <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><title>DOM Test</title> </li></ul><u...
Example of Node Properties. <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><title>DOM Test</title> </li></ul><u...
Example of Node Properties. <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><title>DOM Test</title> </li></ul><u...
Example of Node Properties. <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><title>DOM Test</title> </li></ul><u...
Display Properties of  EM child Nodes <ul><li><script language=&quot;JavaScript&quot;> </li></ul><ul><li>var ce = document...
Node Method <ul><li>hasChildNodes () – returns true for false. </li></ul><ul><li>For example </li></ul><ul><li>var ce =  d...
Few More Properties <ul><li>document.documentElement – returns the reference of root element of the tree i.e. html. </li><...
Upcoming SlideShare
Loading in …5
×

Week4142

1,961 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,961
On SlideShare
0
From Embeds
0
Number of Embeds
1,428
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Week4142

  1. 1. DOM Core, DOM HTML, DOM CSS
  2. 2. Document Trees <ul><li>A web page can be represented as Document Tree . </li></ul>
  3. 3. An Example of Document Tree <ul><li>Consider the Following Code </li></ul><ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><title>DOM Test</title> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><h1> DOM Test Heading </h1> </li></ul><ul><li><hr /> </li></ul><ul><li><!-- Just a comment --> </li></ul><ul><li><p>A paragraph of <em>text</em> is just an example</p> </li></ul><ul><li><ul> </li></ul><ul><li> <li><a href= http://www.yahoo.com >Yahoo!</a></li> </li></ul><ul><li></ul> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  4. 4. An Example of Document Tree
  5. 5. An Example of Document Tree <ul><li>In Computer Science, A tree consist of NODES. </li></ul><ul><li>In the previous example, Every Node has a Type associated with it, called as Node Type . </li></ul><!– Just a Comment --> 8 Comment DOM test heading 3 Text href = http://www.yahoo.com 2 Attribute <h1>..</h1> 1 Element Example Node Type Number Node Type
  6. 6. 2 nd Example of Document Tree <ul><li><p> </li></ul><ul><li>A paragraph of <em>text</em> is just an example </li></ul><ul><li></p> </li></ul><ul><li>There are 5 nodes </li></ul><ul><li>P has node type element. </li></ul><ul><li>“ A paragraph of” has node type text. </li></ul><ul><li>EM has node type element. </li></ul><ul><li>“ Is just an example” has node type text. </li></ul><ul><li>“ text” has node type text. </li></ul>
  7. 7. Second Example <ul><li>P element has 3 children . </li></ul><ul><ul><li>Text node </li></ul></ul><ul><ul><li>EM element </li></ul></ul><ul><ul><li>Another text node. </li></ul></ul><ul><li>The text node “A paragraph of ” is the first child of P element. </li></ul><ul><li>The last child of P element is “is just an example”. </li></ul><ul><li>The parent of EM element is P . </li></ul><ul><li>The text node containing “text” is the child of the EM element. </li></ul>
  8. 8. Second Example <ul><li>Node 1 is parent of Node a, b, c. </li></ul><ul><li>Node b is parent of Node d. </li></ul><ul><li>Node a is the first child of node 1. </li></ul><ul><li>Node c is the last child of node 1 </li></ul><ul><li>Node b is next sibling of node a. </li></ul><ul><li>Node c is next sibling of node b. </li></ul><ul><li>Node b is the previous sibling of node c. </li></ul><ul><li>Node a is the previous sibling of node b. </li></ul><ul><li>Node d is the child of node b. </li></ul>
  9. 9. DOM Node Properties <ul><li>A document tree consist of nodes . </li></ul><ul><li>Each node has some properties associated with it. </li></ul><ul><li>The properties help us to extract information about a node and its neighbours. </li></ul>
  10. 10. Document Node Properties <ul><li>nodeName – returns the name of node. </li></ul><ul><li>nodeValue – returns the value of node. (returns text for text node otherwise return null.) </li></ul><ul><li>nodeType – returns the number for that node. </li></ul><ul><li>parentNode – returns the reference of the parent node. </li></ul><ul><li>childNodes – returns the array of all childNodes. childNodes[0] is the first node, childNodes[1] is the 2 nd node and so on. </li></ul><ul><li>firstChild – return the reference of firstChild </li></ul>
  11. 11. Document Node Properties <ul><li>lastChild – returns the reference of last Child </li></ul><ul><li>previousSibling – returns the reference of previous sibling. </li></ul><ul><li>nextSibling – returns the reference of next sibling. </li></ul><ul><li>attributes – returns the array of attributes for a node. </li></ul>
  12. 12. Example of Node Properties. <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><title>DOM Test</title> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><p id=&quot;p1&quot; align=&quot;center&quot;> </li></ul><ul><li>A paragraph of <em>text</em> </li></ul><ul><li>is just an example. </li></ul><ul><li></p> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul><ul><li>Insert the following code in <body> section after the <p> tag. </li></ul><ul><li><script language=“JavaScript”> </li></ul><ul><li>var ce = document.getElementById(“p1”); </li></ul><ul><li>alert( ce.nodeName ); </li></ul><ul><li>alert( ce.nodeType ); </li></ul><ul><li>alert( ce.nodeValue ) </li></ul><ul><li></script> </li></ul><ul><li>Output: </li></ul><ul><li>p ---- node Name </li></ul><ul><li>1 ---- node Type </li></ul><ul><li>null --- node Value </li></ul>
  13. 13. Example of Node Properties. <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><title>DOM Test</title> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><p id=&quot;p1&quot; align=&quot;center&quot;> </li></ul><ul><li>A paragraph of <em>text</em> </li></ul><ul><li>is just an example. </li></ul><ul><li></p> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul><ul><li>Insert the following code in <body> section after the <p> tag. </li></ul><ul><li><script language=“JavaScript”> </li></ul><ul><li>var ce = document.getElementById(“p1”); </li></ul><ul><li>alert(&quot;The number of child nodes of <p> are &quot; + ce.childNodes.length ); </li></ul><ul><li></script> </li></ul><ul><li>Output: </li></ul><ul><li>3 </li></ul>
  14. 14. Example of Node Properties. <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><title>DOM Test</title> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><p id=&quot;p1&quot; align=&quot;center&quot;> </li></ul><ul><li>A paragraph of <em>text</em> </li></ul><ul><li>is just an example. </li></ul><ul><li></p> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul><ul><li>Insert the following code in <body> section after the <p> tag. </li></ul><ul><li><script language=“JavaScript”> </li></ul><ul><li>var ce = document.getElementById(“p1”); </li></ul><ul><li>for (var i=0;I< ce.childNodes.length ;i++) displayNodeProperties ( ce.childNodes[i] , I ) </li></ul><ul><li>function displayNodeProperties (cn,i) </li></ul><ul><li>{ </li></ul><ul><li>var j = i+1; </li></ul><ul><li>alert(&quot;node&quot;+j+ </li></ul><ul><ul><li>&quot;n nodeName = “ + cn.nodeName + </li></ul></ul><ul><ul><li>&quot;n nodeType = “ + cn.nodeType + </li></ul></ul><ul><ul><li>&quot;n nodeValue = &quot; + cn.nodeValue ); </li></ul></ul><ul><li>} </li></ul><ul><li></script> </li></ul>
  15. 15. Example of Node Properties. <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><title>DOM Test</title> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><p id=&quot;p1&quot; align=&quot;center&quot;> </li></ul><ul><li>A paragraph of <em>text</em> </li></ul><ul><li>is just an example. </li></ul><ul><li></p> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul><ul><li>Insert the following code in <body> section after the <p> tag. </li></ul><ul><li><script language=“JavaScript”> </li></ul><ul><li>var ce = document.getElementById(“p1”); </li></ul><ul><ul><li>displayNodeProperties ( ce.firstChild); </li></ul></ul><ul><li>function displayNodeProperties (cn) </li></ul><ul><li>{ </li></ul><ul><li>alert ( </li></ul><ul><ul><li>&quot;n nodeName = “ + cn.nodeName + </li></ul></ul><ul><ul><li>&quot;n nodeType = “ + cn.nodeType + </li></ul></ul><ul><ul><li>&quot;n nodeValue = &quot; + cn.nodeValue ); </li></ul></ul><ul><li>} </li></ul><ul><li></script> </li></ul><ul><li>Output: </li></ul><ul><li>nodeName = #text </li></ul><ul><li>nodeType = 3 </li></ul><ul><li>nodeValue = “A paragraph of” </li></ul>
  16. 16. Example of Node Properties. <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><title>DOM Test</title> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><p id=&quot;p1&quot; align=&quot;center&quot;> </li></ul><ul><li>A paragraph of <em>text</em> </li></ul><ul><li>is just an example. </li></ul><ul><li></p> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul><ul><li>Insert the following code in <body> section after the <p> tag. </li></ul><ul><li><script language=“JavaScript”> </li></ul><ul><li>var ce = document.getElementById(“p1”); </li></ul><ul><li>var fc = ce.firstChild; </li></ul><ul><li>var lc = ce.lastChild; </li></ul><ul><li>var sc = fc.nextSibling; </li></ul><ul><li>//or lc.previousSibling </li></ul><ul><li>displayNodeProperties (sc ); </li></ul><ul><li>function displayNodeProperties (cn) </li></ul><ul><li>{ </li></ul><ul><li>alert ( </li></ul><ul><ul><li>&quot;n nodeName = “ + cn.nodeName + </li></ul></ul><ul><ul><li>&quot;n nodeType = “ + cn.nodeType + </li></ul></ul><ul><ul><li>&quot;n nodeValue = &quot; + cn.nodeValue ); </li></ul></ul><ul><li>} </li></ul><ul><li></script> </li></ul><ul><li>Output: </li></ul><ul><li>nodeName = em </li></ul><ul><li>nodeType = 1 </li></ul><ul><li>nodeValue = NULL </li></ul>
  17. 17. Example of Node Properties. <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><title>DOM Test</title> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><p id=&quot;p1&quot; align=&quot;center&quot;> </li></ul><ul><li>A paragraph of <em>text</em> </li></ul><ul><li>is just an example. </li></ul><ul><li></p> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul><ul><li>To display properties of em children </li></ul><ul><li>Get reference of <em> node in a variable sc. </li></ul><ul><li>Use, sc.firstChild or sc.childNodes[0]. </li></ul><ul><li>Call function </li></ul><ul><ul><li>displayNodeProperties(sc.firstChild) </li></ul></ul><ul><ul><li>OR </li></ul></ul><ul><ul><li>displayNodeProperties(sc.childNodes[0]) </li></ul></ul>
  18. 18. Display Properties of EM child Nodes <ul><li><script language=&quot;JavaScript&quot;> </li></ul><ul><li>var ce = document.getElementById(&quot;pid&quot;); // get reference of tag p. </li></ul><ul><li>var fc = ce.firstChild ; // get reference of first Child of tag p. </li></ul><ul><li>var lc = ce.lastChild; // get reference of second chld of tag p </li></ul><ul><li>// get reference of 2 nd child of tag p. </li></ul><ul><li>var sc = fc.nextSibling ; //or lc.previousSibling </li></ul><ul><li>displayNodeProperties ( sc.childNodes[0] ) // display properties for children of second child of p. </li></ul><ul><li>function displayNodeProperties ( cn ) </li></ul><ul><li>{ </li></ul><ul><li>alert(&quot;n nodeName = &quot;+cn.nodeName+&quot;n nodeType = &quot;+cn.nodeType+ &quot;n nodeValue = &quot; + cn.nodeValue ); </li></ul><ul><li>} </li></ul><ul><li></script> </li></ul><ul><li>Output </li></ul><ul><li>nodeName = #text </li></ul><ul><li>nodeType = 3 </li></ul><ul><li>nodeValue = “text” </li></ul>
  19. 19. Node Method <ul><li>hasChildNodes () – returns true for false. </li></ul><ul><li>For example </li></ul><ul><li>var ce = document.getElementById(“p1”) ; </li></ul><ul><li>if ( ce.hasChildNodes() ) </li></ul><ul><li>alert(“I can access his children”); </li></ul><ul><li>else </li></ul><ul><li>alert(“I cannot access his children”); </li></ul>
  20. 20. Few More Properties <ul><li>document.documentElement – returns the reference of root element of the tree i.e. html. </li></ul><ul><li>document.body - returns the reference of <body>. </li></ul>

×