Bookmark and Share

Introduction to the Document Object Model

The Document Object Model, or DOM, is the interface that allows you to programmatically access and manipulate the contents of a web page (or document). It provides a structured, object-oriented representation of the individual elements and content in a page with methods for retrieving and setting the properties of those objects. It also provides methods for adding and removing such objects, allowing you to create dynamic content.

The DOM also provides an interface for dealing with events, allowing you to capture and respond to user or browser actions. This feature is briefly covered here but the details are saved for another article. For this one, the discussion will be on the DOM representation of a document and the methods it provides to access those objects.

DOM Levels and Support

A short history lesson in order. When JavaScript was first introduced in browsers, some sort of interface was required to allow elements on the page to be accessed via scripting. Each vendor had their own implementation but de facto standards emerged to produce a fairly simple model common to most.

For example, most browsers used an array of Image objects to represent all IMG tags on a page. These could then be accessed and manipulated via JavaScript. A simple image rollover might use code like this:

document.images[3].src = "graphics/button2.gif"

These early models were limited. They only provided access to a few types of element and attributes, like images, links or form elements.

As vendors released new versions of browsers, they expanded on the model. But they also were often at odds with one another, leading to compatibility problems among different browsers as vendors tried to outdo each other by adding their own new features.

Fortunately, most vendors started adopting the DOM standard set by the World Wide Web Consortium, notably Internet Explorer, Netscape and Opera.

In order to provide some backward compatibility, different levels of the DOM standard are defined. You might find references to DOM Level 0 (or "DOM0") which corresponds to the model used by the first, scriptable browsers - mainly Internet Explorer and Netscape prior to version 4 of each. Then there is DOM1 which was adopted in 1998 and covers some of the features introduced in version 4 browsers.

Standards Compliant Browers

Review the W3C DOM2 standard recommendation.

Most of the current browsers (version 5 and up) support the DOM2 standard, or at least a good part of it. They may also continue to support some features of the earlier DOM levels, or their own proprietary extensions, so that they are compatible with older web pages.

This article will focus just the current, DOM2 standard. While this standard applies to XML (extended markup language) documents in general, it discusses how the standard applies to HTML in particular (it being a subset of XML).

The good news is that, given the current industry trend, you can expect future versions of browsers to follow this standard. The bad news is that for now, you may find it difficult to code pages that work with both old and new browsers.

One such example is Netscape 6.0, which drops support for many of the proprietary features of Netscape 4, such as the LAYER tag and its corresponding Layer object. They are not recognized in version 6 as they were never adopted as part of the standard.

Also note that Internet Explorer's document.all construct is a proprietary feature, not part of any standard. While it may be supported in many versions of IE - even the latest version - it's generally not supported by other browsers.

You should keep in mind that the DOM coding is also indirectly dependent on the standards for HTML and CSS, since the DOM reflects the tags and attributes defined by those standards. It also depends on a standard for JavaScript since the DOM is essentially and API for client-side scripting.

The Document Tree

When a browser loads a page, it creates a hierarchical representation of its contents which closely resembles its HTML structure. This results in a tree-like organization of nodes, each representing an element, an attribute, content or some other object.

Nodes

Each of these different object types will have their own unique methods and properties. But each also implements the Node interface. This is a common set of methods and properties related to the document tree structure. To understand this interface better, take a look a the diagram below which represents a simple node tree.

Sample Node Tree

The Node object provides several properties to reflect this structure and allow you to traverse the tree. Here are some relationships using the example above:

The Node interface also provides methods for dynamically adding, updating and removing nodes such as:

These will be covered later. But for now let's look how the document tree reflects the contents of a web page.