Chapter 10: The Standard Document Object Model | JavaScript: The Complete Reference, Second Edition

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 ( www.w3.org/DOM ). 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.

Note	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 .

DOM Level 0 Roughly equivalent to what Netscape 3.0 and Internet Explorer 3.0 supported. We call this DOM the classic or traditional JavaScript object model. This form of the DOM was presented in the last chapter and supports the common document object collections ” forms[] , images[] , anchors[] , links[] , and applets[] .
DOM Level 1 Provides the ability to manipulate all elements in a document through a common set of functions. In DOM Level 1, all elements are exposed and parts of the page can be read and written to at all times. The Level 1 DOM provides capabilities similar to Internet Explorer s document.all[] collection, except that it is cross-browser “compatible and standardized.

DOM Level 2 Provides further access to page elements primarily related to XML and focuses on combining DOM Level 0 and Level 1 while adding support for style sheet access and manipulation. This form of the DOM also adds an advanced event model and the lesser known extensions such as traversal and range operations. Unfortunately, beyond style sheet access, many DOM Level 2 features are not supported in common Web browsers including those that claim fantastic standards support.

Note

At the time of this book s writing, the DOM Level 3 is still in development. This version of the DOM will improve support for XML including adding support for XPath, extend Level 2 s event model (primarily to support keyboard and device events), and add features to allow content to be exchanged between files (including a load and save feature to exchange documents).

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:

DOM Core Specifies a generic model for viewing and manipulating a marked up document as a tree structure.
DOM HTML Specifies an extension to the core DOM for use with HTML. DOM HTML provides the features used to manipulate HTML documents and utilizes a syntax similar to the traditional JavaScript object models. Basically, this is DOM Level 0 plus the capabilities to manipulate all of the HTML element objects.
DOM CSS Provides the interfaces necessary to manipulate CSS rules programmatically.
DOM Events Adds event handling to the DOM. These events range from familiar user interface events such as mouse clicks to DOM-specific events that fire when actions occur that modify parts of the document tree.
DOM XML Specifies an extension to the core DOM for use with XML. DOM XML addresses the particular needs of XML, such as CDATA Sections, processing instructions, namespaces, and so on.

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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">> <<html xmlns="http://www.w3.org/1999/xhtml" lang="en">> <<head>> <<title>>DOM Implementation Test<</title>> <<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />> <</head>> <<body>> <<h1>>DOM Feature Support<</h1>> <<hr />> <<script type="text/javascript">> <<!-- var featureArray =  ["HTML","XML","Core","HTML","XML","Views","StyleSheets","CSS","CSS2","Events", "UIEvents","MouseEvents","HTMLEvents","MutationEvents","Range","Traversal"]; var versionArray = ["1.0","1.0","2.0","2.0","2.0","2.0","2.0","2.0","2.0","2.0","2.0","2.0","2.0", "2.0","2.0","2.0"]; 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 />>");   } } //-->> <</script>> <</body>> <</html>>

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

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.