JavaScript Editor JavaScript Debugger     JavaScript Editor 

Team LiB
Previous Section Next Section

Chapter 10: The Standard Document Object Model

In the last chapter we presented the various object models supported by the two major browsers. These object models included objects for the window, documents, forms, images, and so on. We pointed out that these objects correspond to the features of the browser as well as to the features of the (X)HTML document and style sheets. A major problem with browser-based object models is that each vendor decides which features to expose to the programmer and how to do so. To combat the browser incompatibilities discussed in Chapter 9, the W3C came up with a standard that maps between an (X)HTML or XML document and the document object hierarchy presented to the programmer. This model is called the Document Object Model, or the DOM for short ( The DOM provides an application programming interface (API) that exposes the entirety of a Web page (including tags, attributes, style, and content) to a programming language like JavaScript. This chapter explores the basic uses of the DOM, from examining document structure to accessing common properties and methods. We’ll see that a key part of DOM mastery is a thorough understanding of (X)HTML and CSS. While the DOM does point toward a future where cross-browser scripting will be less of an issue, we will also see that browser vendors have only recently begun to truly embrace Web standards and bugs still exist. This chapter’s examples will work in the 5.x generation (or better) of most Web browsers—but some bugs may still exist, so proceed with caution.


The discussion of the DOM really does require that you are extremely comfortable with (X)HTML and CSS. Readers who are not are encouraged to review these topics, for example, in the companion book HTML & XHTML: The Complete Reference 4th Edition by Thomas Powell (Osborne/ McGraw-Hill, 2003).

DOM Flavors

In order to straighten out the object model mess presented in the last chapter, the W3C has defined three levels of the DOM, listed next.

Another way of looking at the DOM as defined by the W3C is by grouping the pieces of the DOM concept into the following five categories:

According to the DOM specification, we should be able to test for the availability of a particular aspect of the DOM specification using document.implementation.hasFeature() and pass it a string for the feature in question like “CORE” and a string for the version number—at this point “1.0” or “2.0.” The following script shows how you might detect the DOM support in a browser.

<<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<<html xmlns="" lang="en">>
<<title>>DOM Implementation Test<</title>>
<<meta http-equiv="content-type" content="text/html; charset=utf-8" />>
<<h1>>DOM Feature Support<</h1>>
<<hr />>
<<script type="text/javascript">>

var featureArray =

var versionArray =

var feature;
var version;

for (i=0;i<<featureArray.length;i++)
 feature = featureArray[i];
 version = versionArray[i]; 

 if (document.implementation && document.implementation.hasFeature)
    document.write(feature + " " + version + " : ");
    document.write(document.implementation.hasFeature(feature, version));
    document.write("<<br />>");

You’ll notice that the results shown in Figure 10-1 suggest that DOM support is spotty in the most popular browser, Internet Explorer.

Click To expand
Click To expand Click To expand
Figure 10-1: Reported DOM support under IE, Mozilla, and Opera

Actually, it is better than the script reveals but will turn out that save Mozilla, most browsers have support primarily for DOM Level 1 and parts of DOM Level 2 so we focus in this chapter on what is commonly available in modern browsers. In other words, we will talk about DOM Core, DOM HTML, and DOM CSS. DOM Events will be discussed in Chapter 11. It is important to note that although we will be using JavaScript in this chapter, the DOM specifies a language-independent interface. So, in principle, you can use the DOM in other languages such as C/C++ and Java.

The first step in understanding the DOM is to learn how it models an (X)HTML document.

Team LiB
Previous Section Next Section

JavaScript Editor JavaScript Debugger     JavaScript Editor