The Document Object Model Dissected

Tutorial TOC

1. Introduction
2. Gray's Anatomy\ Master of Your DOM
3. Use the DOM, Luke
4. Netscape: The DOM
5. Microsoft: DOM, the Sequel
6. DOM of the Future

Gray's Anatomy

The classic biology text, a cornerstone reference for students of the human composition, sets out to detail the components which make up the human organism; form and function. This Cartesian approach assumes that if we understand the characteristic properties of each building block we can understand the whole. More specifically, if we know how to modify (fix, improve, etc.) the components, we can modify the whole in a targeted way.

Quite similarly, the Document Object Model sets out to map the Web page for developers, as Gray's Anatomy maps the body for doctors. Broken down into its own components, the DOM details the characteristic properties of each element of a Web page, thereby detailing how we might manipulate these components and, in turn, manipulate the page. There is an important difference between the two references, however: while Gray's Anatomy is a descriptive source, subject to the design implemented by Nature, the Document Object Model is prescriptive, as it defines what components we may or may not modify, and how, as decided by a panel of developers.

The crux of this difference is that, unlike the components of the human body, the inventory of components which make up a web page are rather arbitrarily defined. Simply put, one panel of developers may decide to break the Web page down into a certain Set X of components while another panel may prefer to reduce a page into Set Y of components.

So, while Gray's Anatomy speaks usefully to all human bodies, a particular DOM speaks only for web pages within a supporting browser. Microsoft's DOM, as implemented through their fifth generate browser (MSIE 5.x) is not fully compatible with Netscape's DOM, as implemented through their fourth generation brwoser (Navigator/Communitor 4.x). What's more, the World Wide Web Consortium (W3C) -- recognized standards body of the web -- has been brewing their own DOM, having released their "DOM Level 1" and on the verge of releasing their "DOM Level 2" specifications. The theory is that browser developers should support the W3C standard, eliminating incompatibility. Netscape's recent preview of their fifth generation browser (named version 6 for marketing reasons) features a DOM extremely compliant with W3C standards, but not necessarily compliant with Microsoft's DOM. This discord, an ongoing challenge to web developers, will likely persist.

Master of your DOM

The inconsistencies between browsers and their supported Document Object Models have been the cause of developers' cramps, night sweats, and eating disorders -- not to mention lost productivity time and increased costs for clients. But there is an up-side: needing to know two DOM's may inspire you to become a DOM master, learning the DOM's intimately. This is a Good Thing, because mastery of a DOM is the key to great Web page development, even if the two corporate giants reconcile their differences.

Before we delve into either DOM in specific, let's consider the composition of the DOM itself -- in other words, the anatomy of an anatomy!

Both Netscape and Microsoft Document Object Models break down Web pages into roughly four types of components, summarized in the table below.

Component Makeup of the Document Object Model.

Component	Description
Objects	Container which reflects a particular element of a page; objects "contain" the various characteristics which apply to that element (known as properties and methods); example: the submit object contains properties and methods relevant to the submit button in a form.
Properties	Characteristics of an object; for example, the document object possesses a bgColor property which reflects the background color of the page. Using a programming language (e.g. JavaScript) you may, via this property, read or modify the color of the current page. Some objects contain very many properties, some contain very few. Some properties are read-only while others can be modified, possibly resulting in immediate on-screen results.
Methods	A method typically executes an action which somehow acts upon the the object by which it is owned. Sometimes the method also returns a result value. Methods are triggered by the programming language being used, such as JavaScript. For example, the window object possesses a method named alert(). When supplied with string data, the alert() method causes a window to pop up on the screen containing the data as its message; e.g. alert("Invalid entry!").
Events	An event is used to trap actions related to its owning object; typically, these actions are caused by the user. For example, when the user clicks on a submit button, this is a click event which occurs at the submit object. By virtue of submitting a form, a submit event is also generated, following the click event. Although these events occur transparently, you can choose to intercept them and trigger specified program code to execute.

Since it seems that both DOM's outline the same types of page components, how do these two DOM's differ? By and large, the differences are in the details. One DOM may contain objects which the other does not; one DOM may support unique properties for an object which itself is common to both; one DOM may support events occurring at an object which are not supported in the other.

In fact, at first glance both Microsoft and Netscape's DOM's appear similar -- and they are. Both, after all, are reaching towards a similar goal -- to reduce the anatomy of the page into manipulable parts.

Use the DOM, Luke

Client-side manipulation of a web page requires some additional programming, beyond HTML (which itself is not programming at all). The Document Object Model serves to "expose" the page to a programming language for the purposes of manipulation. Typically, JavaScript is the programming language of choice for most client-side manipulations, mainly because both major browsers support it. Using JavaScript to manipulate a page through the Document Object Model is commonly called "DHTML" or "Dynamic HTML". It's important, though, to understand that the Document Object Model is not a "part" of JavaScript. The DOM stands alone, able to be interfaced with any programming language designed to do so -- JavaScript is simply the most popular, although VBScript can also manipulate a page via the DOM within Microsoft's browser.

Mastery of the DOM does not equate to memorizing it. Rather, if you understand how the DOM is structured and how to understand its references you can easily turn to a suitable reference for details whenever the need arises. Still, a working knowledge of DOM details -- inevitable after working with it several times -- helps you efficiently sketch out program approaches to achieving a certain goal. Let's begin using the DOM with a close-up look at Netscape's Document Object Model.