The Document Object Model
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

The Document Object Model

  • 1,071 views
Uploaded on

javascript training

javascript training

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,071
On Slideshare
1,070
From Embeds
1
Number of Embeds
1

Actions

Shares
Downloads
29
Comments
0
Likes
0

Embeds 1

http://www.slideshare.net 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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