Document Object Model

What is it?

• Transversing the DOM (how to get around generically)
• Nodes
• defines properties and methods for manipulating the tree
• childNodes - returns a list of all of the children of a node
• document.childNodes[1].childNodes[0].childNodes[2]
• firstChild
• lastChild
• nextSibling
• previousSibling
• parentNode
• nodeType
• '1'-element
• '2'-Attribute
• '3'-text
• '8'-comment
• ...
• nodeName
• nodeValue
• Now, how about the same as above, but have JS trip through the entire document?
  • same document as above, but look at the source and check out the JavaScript

• finding things much more quickly (how to get around specifically)
• getElementById()
• getElementsByTagName() - array!
• document.getElementsByTagName("p")[3]
• getElementsByName
• document.getElementsByName("sex")[1] - radio buttons
• Mixing the two...
• document.getElementById("idName").firstChild
• document.getElementById("idName").childNodes[2]
• --OR--
• document.getElementById('test').getElementsByTagName('li')[0].firstChild.nodeValue
  • WAY Powerful!
  • Might NOT find the text inside of the first 'li' on the page
  • But DOES find the text inside of the first 'li' from the subset found inside of the id of test

• Creating new 'Nodes' (in memory only)
• createElement()
• setAttribute()
• createTextNode()
• appendChild()
• var newEle=document.createElement("h3"); //create the node (tag)
  newEle.setAttribute("style", "color:red;font-family:skia;"); //give it an attribute (style)
  newEle.setAttribute("id","myNewHeader"); //give it an attribute (id - so I can call it later!)
  newEle.appendChild(document.createTextNode("Text for the new node!")); //Put some text inside of the new h3
  

• Placing the new 'Nodes' into the document (how to stick new things in!)
• node.appendChild()
• node.insertBefore()
• node.removeChild()
• node.replaceChild()
• node.cloneNode()
• var newEle=document.createElement("h3");
  newEle.setAttribute("style", "color:red;font-family:skia;");
  newEle.setAttribute("id","myNewHeader");
  newEle.appendChild(document.createTextNode("Text for the new node!"));
  document.body.appendChild(newEle); //This does it! (appends on the document - at the end)

Build 2 DOM thingies...