The DOM and Nodes

What is a Node?

One of the best ways I’ve heard a node (and node maps) explained is to think about a family tree. Node maps are also often discussed as tree structures. A family tree provides the terminology from which we get relationships in a node map. Look at the simple family tree below:

Here each orange square represents a node in the tree structure. This is a very simple node map. Furthermore you have some relationships exposed within the node map. You and your brother or sister are siblings. Your father is a parent (and your mother, were she shown!) Your gramps is an ancestor. Everyone below gramps is a descendant. Your Dad and Uncle are children of gramps, and you and your sibling are children of your father.

You can think of an HTML document (and also an XML document - the DOM applies to both) in the exact same way. According to the W3C, each container, standalone element (like a BR element – one that closes on its own) or text chunk is known as a node. That will cover everything you ever have on a page, from basic text fragments to DIV tags with classes and form elements and so on and on.

JavaScript gives us methods to deal with these nodes so we can do powerful things. So for an HTML document, the node at the root of the DOM tree is a Document object. This should be familiar to you as you have done lots of things like document.getElementById() and document.forms[‘formname’]. The DOM tree is then built from that origin. The bulk of a DOM tree consists of Element objects which represent tags, such as P and DIV and even HTML.