Document Object Model
What is it?
Click here to see above
- 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...