1. The DOM

  2. The Document Object Model

    The Document Object Model is a platform- and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents. The document can be further processed and the results of that processing can be incorporated back into the presented page.

  3. Nodes

    A document is a tree of nodes

    These nodes form a model of the document

  4. Markup

    
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Shopping list</title>
  </head>
  <body>
    <h1>What to buy</h1>
    <p title="a gentle reminder">Don't forget to buy this stuff.</p>
    <ul id="purchases">
      <li>A tin of beans</li>
      <li>Cheese</li>
      <li>Milk</li>
    </ul>
  </body>
</html>

  5. Element nodes

    A tree of element nodes in a document

  6. Element, attribute and text nodes

    The nodes of a single element 
    
<p title="a gentle reminder">Don't forget to buy this stuff.</p>

  7. Node Types

    nodeTypeNamed Constant
    1ELEMENT_NODE
    2ATTRIBUTE_NODE
    3TEXT_NODE
    4CDATA_SECTION_NODE
    5ENTITY_REFERENCE_NODE
    6ENTITY_NODE
    7PROCESSING_INSTRUCTION_NODE
    8COMMENT_NODE
    9DOCUMENT_NODE
    10DOCUMENT_TYPE_NODE
    11DOCUMENT_FRAGMENT_NODE
    12NOTATION_NODE

  8. Node properties

  9. Node properties

    
<p title="a gentle reminder">Don't forget to buy this stuff.</p>
    nodeNamenodeTypenodeValue
    elementP1null
    attributeTITLE2a gentle reminder
    text#text3Don't forget to buy this stuff.

  10. Family relations

    Parents, children and siblings.

  11. Family tree

    The nodes in a list

  12. Nodes are objects

    Every node is an object.

    Every node has properties.

    Information about itself: nodeType, nodeName, nodeValue

    Information about its family: parentNode, firstChild, nextSibling, etc.

  13. DOM methods

  14. getElementsByTagName

    English:
    Access all the li tags in a document.
    CSS:
    li { }
    DOM:
    document.getElementsByTagName("li")

  15. getElementById

    English:
    Access the element with the ID "purchases".
    CSS:
    #purchases { }
    DOM:
    document.getElementById("purchases")

  16. Combine the two

    English:
    Access all the li elements within the element with the ID "purchases".
    CSS:
    #purchases li { }
    DOM:
    document.getElementById("purchases").getElementsByTagName("li")

  17. Attribute nodes

    English:
    Get the value of the title attribute for an element.
    DOM:
    element.getAttribute("title")
    English:
    Set the value of the title attribute for an element to "some text".
    DOM:
    element.setAttribute("title","some text")

  18. Looping the loop

    English:
    Get all the li elements in the "purchases" element, loop through them all and set the value of each one's title attribute to "food item".
    JavaScript + DOM:
    
var list = document.getElementById("purchases");
var items = list.getElementsByTagName("li");
for (var i=0; i < items.length; i++) {
  items[i].setAttribute("title","food item");
}

  19. Next...

    Writing functions

    Triggering functions from events... unobtrusively.