The Document Object Model

1,102 views
1,039 views

Published on

javascript training

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,102
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
37
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

The Document Object Model

  1. 1. DOM<br />The Document Object Model<br />
  2. 2. Ia standard way of representing XML documents (instituted by the W3C).<br />Was constructed to provide an intuitive way for developers to navigate an XML hierarchy.<br />DOM is as a navigable tree, parents, children, siblings<br />Every object in a DOM tree is a node. Each node can have a different type, such as element, text, or document<br />What is dom?<br />
  3. 3. &lt;p&gt;&lt;strong&gt;Hello&lt;/strong&gt; how are you doing?&lt;/p&gt;<br />Dom<br />
  4. 4. Given &lt;p&gt;&lt;strong&gt;Hello&lt;/strong&gt; how are you doing?&lt;/p&gt;.<br />Given &lt;p&gt; find text “how are you doing”?<br />Given &lt;strong&gt; find &lt;p&gt;?<br />Given &lt;strong&gt; find “Hello”<br />Given &lt;strong&gt; find “how are you doing?”<br />Try Something Out My Dears.<br />
  5. 5. Dom recognise line end as whitespace<br />&lt;html&gt;<br />&lt;head&gt;<br />&lt;title&gt;Introduction to the DOM&lt;/title&gt;<br />&lt;/head&gt;<br />&lt;body&gt;<br />&lt;h1&gt;Introduction to the DOM&lt;/h1&gt;<br />How if I want to get the title node?<br />document.documentElement.firstChild.nexSibling.firstChild<br />
  6. 6. function cleanWhitespace( element ) {<br />// If no element is provided, do the whole HTML document<br />element = element || document;<br />// Use the first child as a starting point<br />var cur = element.firstChild;<br />// Go until there are no more child nodes<br />while ( cur != null ) {<br />// If the node is a text node, and it contains nothing but whitespace<br />if ( cur.nodeType == 3 && ! /S/.test(cur.nodeValue) ) {<br />// Remove the text node<br />element.removeChild( cur );<br />// Otherwise, if it&apos;s an element<br />} else if ( cur.nodeType == 1 ) {<br />// Recurse down through the document<br /> cleanWhitespace( cur );<br />}<br />cur = cur.nextSibling; // Move through the child nodes<br />}<br />}<br />It is significantly slow, let say you inject a new node into document.<br />Handling White Space in Dom<br />
  7. 7. Element (nodeType = 1): This matches most elements in an XML file. For example, &lt;li&gt;,&lt;a&gt;, &lt;p&gt;, and &lt;body&gt; elements all have a nodeType of 1.<br />Text (nodeType = 3): This matches all text segments within your document. <br />Document (nodeType = 9): This matches the root element of a document, &lt;html&gt; element.<br />nodeType Property<br />
  8. 8. Simple Dom Navigation<br />function prev( elem ) {<br /> do {<br /> elem = elem.previousSibling;<br /> } while ( elem && elem.nodeType != 1 );<br /> return elem;<br />}<br />function next( elem ) {<br /> do {<br /> elem = elem.nextSibling;<br /> } while ( elem && elem.nodeType != 1 );<br /> return elem;<br />}<br />function first( elem ) {<br /> elem = elem.firstChild;<br /> return elem && elem.nodeType != 1?next ( elem ) : elem;<br />}<br />function last( elem ) {<br /> elem = elem.lastChild;<br /> return elem && elem.nodeType != 1 ?<br /> prev ( elem ) : elem;<br />}<br />
  9. 9. getElementById(“everywhere”): This method, which can only be run on the document object, finds all elements that have an ID equal to everywhere. This is a very powerful function and is the fastest way to immediately access an element.<br />getElementsByTagName(“li”): This method, which can be run on any element, finds all descendant elements that have a tag name of li and returns them as a NodeList (which is nearly identical to an array).<br />Dom Methods<br />
  10. 10. function id(name) {<br /> return document.getElementById(name);<br /> }<br />function tag(name, elem) {<br /> return (elem || document).getElementsByTagName(name);<br /> }<br />Try Yourself<br />
  11. 11. Getting the Text Inside an Element<br />// Non-Mozilla Browsers:<br />strongElem.innerText<br />// All platforms:<br />strongElem.firstChild.nodeValue<br />
  12. 12. // Get the innerHTML of the &lt;strong&gt; element<br />// Should return &quot;Hello&quot;<br />strongElem.innerHTML<br />// Get the innerHTML of the &lt;p&gt; element<br />// Should return &quot;&lt;strong&gt;Hello&lt;/strong&gt; how are you doing?&quot;<br />pElem.innerHTML<br />Getting the HTML Inside an Element<br />

×