In today’s post, I would like to discuss climbing a tree. Odd? Well, I am not speaking of a traditional tree climb, but rather climbing the DOM tree.
The HTML DOM is like a ‘tree’…a hierarchy. Each ‘leaf’ on the tree is called a node. Nodes can be parent nodes and/or child nodes. Each node has a type…
- Document
- Element
- Text
- Attribute
We climb the tree by tapping into the document object. Think of this as the ‘trunk’ holding the ‘tree’ together. The document object has several methods and properties that we can use to traverse the DOM. We have already seen an example of this in a previous post. Let’s look at some of the DOM properties we can utilize…
- nodeValue – value stored within node (does not include elements)
-
nodeType – returns type of node (text, document, etc. This gets returned as a number…TEXT = 3…ELEMENT = 1 and so forth)
-
childNodes – children of nodes are contained in arrays in the order in which they appear in the HTML (childNodes[0])
-
firstChild – the…well…first child of a node
-
lastChild – could this be the last child of a node?
So what is the key point – DOM properties, methods, etc. allow us to change the content, structure, and so forth while maintaining standards compliance.
Making use of these methods and properties allows a developer to work their magic with the end users’ experience.
Happy Coding!
Clay Hess
