Understanding the DOM: The Core API
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.
The DOM Tree
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. ...