Most Web programmers are familiar with Dynamic HTML (DHTML) and the underlying Document Object Models developed by Netscape and Microsoft for their respective browsers. However, there is a unifying Document Object Model (DOM) developed by the W3C that is less well known and, hence, used less often. The W3C DOM has several advantages over the DHTML DOM — using its node structure it is possible to easily navigate and change documents despite the user agent used to display them. This article covers the basics of the W3C DOM and teaches you how to use JavaScript to transverse the nodes within it.
The W3C DOM is much more complex than shown within this article. There are several additional methods and properties at your disposal to use in manipulating documents. Further reading and information on the standard can be found on the W3C Web site at http://www.w3.org/TR/2000/WD-DOM-Level-1-20000929/Overview.html. Chapter 22 “JavaScript Objects and Dynamic HTML” of the book Web Standards Programmer’s Reference: HTML, CSS, JavaScript, Perl, Python, and PHP also covers the details of the DHTML DOM.
The History of the DOM
Before diving into working with the DOM, a little history is necessary to put the technology in perspective. The Document Object Model was developed by the World Wide Web Consortium (W3C) to allow programming languages access to the underlying structure of a Web document. Using the DOM a program can access any element in the document, determining and changing attributes and even removing, adding, or rearranging elements at will.
It’s important to note that the DOM is a type of application program interface (API) allowing any programming language access to the structure of a Web document. The main advantage of using the DOM is the ability to manipulate a document without another trip to the document’s server. As such, the DOM is typically accessed and used by client-side technologies, such as JavaScript. Therefore, the coverage of the DOM in the book Web Standards Programmer’s Reference: HTML, CSS, JavaScript, Perl, Python, and PHP appears in the JavaScript part of the book and is very JavaScript-centric.
The first DOM specification (Level 0) was developed at the same time as JavaScript and early browsers. It is supported by Netscape 2 onward.
There were two intermediate DOMs supported by Netscape 4 onward and Microsoft Internet Explorer (IE) versions 4 and 5 onward. These DOMs were proprietary to the two sides of the browser coin — Netscape and Microsoft IE. The former used a collection of elements referenced through a document.layers object, while the latter used a document.all object. To be truly cross-browser compatible, a script should endeavor to cover both of these DOMs instead of one or the other.
The latest DOM specification (Level 1) is supported by Mozilla and Microsoft Internet Explorer version 5 onward. Both browser developers participated in the creation of this level of the DOM and as such support it. However, Microsoft chose to continue to support its document.all model as well, while Netscape discontinued its document.layers model.
Keep in mind also that the DOM was originally intended to allow programs to navigate and change XML, not HTML, documents, so it contains many features a Web developer dealing only with HTML may never need.
Understanding the Document Object Model
The basis of the DOM is to recognize each element of the document as a node connected to other nodes in the document and to the document root itself. The best way to understand the structure is to look at an example. The following code shows an example document that renders as shown in Figure 1 and whose resulting DOM is shown in the illustration of Figure 2.
<html>
<head>
<title>Sample DOM Document</title>
<style type="text/css">
div.div1 { background-color: #999999; }
div.div2 { background-color: #BBBBBB; }
table, table * { border: thin solid black; }
table { border-collapse: collapse; }
td { padding: 5px; }
</style>
<script type="text/JavaScript">
</script>
</head>
<body>
<div class="div1">
<h1>Heading 1</h1>
<table>
<tr><td>Cell 1</td><td>Cell 2</td></tr>
<tr><td>Cell 3</td><td>Cell 4</td></tr>
</table>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing
elit, sed diam <b>nonummy nibh euismod</b> tincidunt ut laoreet
dolore magna aliquam erat volutpat. Ut wisi enim ad minim
veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
<div class="div2">
<h1>Heading 2</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing
elit, sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna aliquam erat volutpat. Ut wisi enim ad minim
veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.</p>
<ol id="sortme">An ordered list
<li>Gamma</li>
<li>Alpha</li>
<li>Beta</li>
</ol>
</div>
</body>
</html>
Figure 1
Figure 2
As you can see, each node is joined to its neighbors using a familiar parent, child, sibling relationship. For example, the first DIV node is a child of the BODY node, and the DIV node in turn has three children — an H1 node, a P node, and an OL node. Those three children (H1, P, and OL) have a sibling relationship to one another.
Plain text, usually the content of nodes such as paragraphs (P), is referenced as textual nodes and is broken down as necessary to incorporate additional nodes. This can be seen in the first P node, which contains a bold (B) element. The children of the P node include the first bit of text up to the bold element, the bold element, and the text after the bold element. The bold element (B) in turn contains a text child, which contains the bolded text.
The relationships between nodes can be explored and traversed using the DOM JavaScript bindings, as described in the next section.
