Master of your DOM

The incompatible DOM's between both browsers have been the cause of developers' cramps, night sweats, and eating disorders -- not to mention lost productivity time and increased costs for clients. Until this situation is resolved, if ever (see end of article), 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 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 difference 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.

Gray's Anatomy
The Document Object Model Dissected
Use the DOM, Luke