Learning JavaScript

Understanding the DOM: The Core API

The DOM HTML API was created specifically to bring in the many implementations of BOM that existed across browsers. However, over the last several years, there’s been a move away from using HTML (with all the proprietary extensions) and toward the XML-based XHTML. The DOM HTML API is still valid for XHTML, but another set of interfaces—the DOM Core API—has gained popularity among current JavaScript developers.

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. One of the paragraphs ...