The Document Object Model (DOM)

By Stephen Bucaro

The elements on a Web page are arranged like branches on a tree (more like an inverted tree, since the root is the top). Each html element represents a node in the DOM tree. Each html element is defined by an opening tag and a closing tag. An Html element that is nested inside another tag is a child node of that parent node.

The purpose of the DOM is to provide an operating system and programming language independent interface to the elements on a Web page. This allows designers using different platforms and languages to modify and style Web pages. Unfortunately, things didn't start out that way.

The browser world started out with two competing models, one created for Netscape Navigator, the other for Microsoft Internet Explorer. Unfortunately, the two object models were not entirely compatible. As each company released new versions of their browsers, they used object models that were not completely compatible with that companies previous version. Finally the World Wide Consortium (W3C) was established to create an international standard. Unfortunately, that compounded the problem.

The W3C created the W3C DOM which was not entirely compatible with neither Netscape's nor Microsoft's browser model. Then the W3C released the W3C DOM Level 2, and W3C DOM Level 3 standards. Now we have a whole pile of incompatible standards, leaving designers leafing through dog-eared compatibility charts, while writing convoluted browser detection algorithms (none of which ever performed properly).

Ultimately all browsers are supposed to comply with the latest W3C standard, and browser developers are working to achieve that goal - but it won't happen any time soon. However, after leafing through your latest compatibility charts, you'll learn that, at least in the basic DOM, a higher level of compatibility has been achieved. The secret to good web design is to use a conservative approach.

Don't try to design for compatibility with browsers more than one version previous to the latest release. Those old browsers are used by only a tiny segment of users, and that is not the big-spender segment. Don't try to design for the latest gee-wiz trivial feature of the latest browser versions, stick with the core basic DOM, which has the most universal compatibility.

The DOM chart provided here shows only part of the DOM. I would have liked to provided a more complete chart, but I can't find an example of a DOM chart that is complete without getting overly complex. I'll be back to update this chart as I learn more.