Use DOM in your Web pages

While the Document Object Model (DOM) is perhaps best known in its role as a foundation for working with XML, variations on the theme actually started in browsers with HTML. Now DOM has come full circle as newer browsers implement the W3C Document Object Model through client-side scripting, such as JavaScript. This article looks at the JavaScript approach to DOM and chronicles the building of a Web page to which the user can add notes and edit note content.

Note:This article uses a DOM-compatible browser such as Netscape 6.x, Internet Explorer 6, or Mozilla 1.0. Familiarity with the Document Object Model in Java technology or other languages, is helpful, but not required. You should, however, be familiar with JavaScript in general.

Why use DOM instead of DHTML?

In this article, I look at the structure of a Web page from a Document Object Model point of view, examining children and parents and adding nodes to and editing nodes within an existing document. To illustrate this, I build a page where the user can create a series of notes to the page and edit their content. (The page won't get too fancy; I'll leave saving the content, moving them around, resizing them and such to you.) As this is something that could be accomplished without much trouble using DHTML techniques, why bother with DOM?

One of the driving forces behind the development of XML was the fragmentation of HTML, and DHTML follows that trend. Some things have become standard, but a significant divergence in how browsers handle various aspects still exists. DOM is a standard set of interfaces that can be implemented across the board, letting programmers write just one version of their pages.

Besides, Web pages are moving towards XML anyway. XHTML 1.0 is a reformulation of HTML 4.0.1 into XML, and XML is increasingly used to generate Web pages. Ultimately, DOM will be the main technique for accessing the elements and text within these pages. (You can also use it in XSLT style sheets.)