CodeGuru content and product recommendations are editorially independent. We may make money when you click on links to our partners. Learn More.
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.
The previous article in this series introduced the W3C DOM and the JavaScript properties and methods that can be used to work with it. This article shows you how to find and recognize particular nodes when using JavaScript to transverse the DOM.
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.
A Sample Document
The code in this article uses the same example document as the previous article, duplicated here for your convenience. The following code shows the 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
