The W3C specifications for the DOM describe a document’s elements as a collection of nodes, connected in a hierarchical tree-like structure. If you use Firefox as a browser, and you’ve opened up the DOM Inspector to look at the page objects, you’ll probably have noticed that the page contents strongly resemble a tree. A web page with a head and body tags, the body with a header (H1), as well as DIV elements containing paragraphs, would have a structure somewhat like this:
document -> HTML -> HEAD -> BODY -> H1 -> DIV -> P -> P
The DOM provides a specification that allows you to access the nodes of this content tree by looking for all of the tags of a certain type or traversing the different levels—literally walking the tree and exploring each node at each level. Not only can you read the nodes in the tree, but you can also create new nodes.
To better understand the document tree, consider a web page that has a head and body section, a page title, and a DIV element that itself contains an H1 header and two paragraphs. One of the paragraphs ...