Working with The Document Object Model - Part III

By Steven M. Schafer

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 articles in this series (Part I and Part II) introduced the W3C DOM and the JavaScript properties and methods that can be used to work with it. You learned how to manually traverse a document's nodes and how to find particular nodes. This final article in this series shows you how to manipulate a document's nodes using JavaScript.

A Sample Document

The code in this article uses the same example document as the previous articles, 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.