Document Object Model

Regardless of the underlying philosophy for enabling the client, the technology relies on the Document Object Model (DOM), a platform-neutral interface to the browser and the HTML documents it's rendering. The specification has been defined by the W3C,[2] and most of the browser manufacturers have implemented it in their latest versions. The idea is to have a common API that Web page developers[3] can use to manipulate the content in the HTML and XML document, as well as the resources of the browser itself.

[2] The World Wide Web Consortium (W3C) of technology vendors and institutions is responsible for HTTP, HTML, XML, XSL, DOM, and other important Web and Internet standards.

[3] I use the term "developer" instead of "author" because we are discussing client-side execution of code, not just content.

With the DOM, programs and scripts can dynamically access and update the content, structure, and style of documents. The document can be further processed by the browser and the results incorporated into the presented page. The browser is now responsible for both the rendering of the HTML in the document, which could change after being received from the server, and the execution of scripts in the document, as well as compiled programs specified by the document.

Figure 3-1 shows the relationships among the browser, HTML document, scripts, compiled modules, and the DOM. The browser contains an HTML document. Contained in the document are scriptslines of interpretable codethat use the DOM interface. The HTML document also contains references to compiled modules, which also use the DOM interface. The browser is responsible for both rendering the dynamic HTML document and implementing the DOM interface for scripts and programs to modify the HTML document.

Figure 3-1. The Document Object Model interface

The name Document Object Model was chosen because it provides an object interface to HTML and XML documents. The documents are manipulated as objects, possessing both data and behavior. The collaboration of these objects represents the structure of the document. Because a document is a collection of objects, it can be represented by an object model. Take as an example the following HTML fragment:

The new HTML 4.0 specification includes additional support for;

• Style sheets
• Internationalization
• Accessibility
• Tables and forms
• Scripting and multimedia

In this example, the HTML expresses a simple itemized list. A simplified[4] class diagram, shown in Figure 3-2, represents the structure of this document. An object diagram, shown in Figure 3-3, shows the relationships among the instances of the "objects" in the document.

[4] The class and instance diagrams are simplified; the actual diagrams contain a large number of other elements that might confuse the main point of the diagrams.

Figure 3-2. Class diagram of HTML document

Figure 3-3. Object, or instance, diagram of HTML document

The key point here is that the DOM specification gives all these elements an object interface that is accessible by scripts or modules executing in the browser. The three principal goals of the DOM are to specify

• The interfaces and objects used to represent and manipulate a document
• The semantics of these interfaces and objects, including both behavior and attributes
• The relationships and collaborations among these interfaces and objects

Another key aspect of the DOM is that it is vendor and platform neutral. Even though it comes with bindings for the Java language, the specification is language independent. All the major browser manufacturers have implemented the DOM in the latest versions of their browsers. The two major browsers, Microsoft and Netscape, have provided an implementation of the DOM and have extended it with a few additional features.

Dynamic HTML (DHTML) is a term used to describe the combination of HTML, style sheets, and scripts that allows documents to be manipulated in a Web browser. DHTML is not a W3C specification or recommendation, so caution should be observed when designing systems that use incompatible elements of DHTML.