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
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
document.images.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 BrowersReview 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.
Layerobject. They are not recognized in version 6 as they were never adopted as part of the standard. Also note that Internet Explorer's
document.allconstruct 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.
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.
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.
Node object provides several properties to reflect this
structure and allow you to traverse the tree. Here are some relationships using
the example above:
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.