What is the DOM? Explaining the Document Object Model

The Document Object Model, or DOM, is an interface to allow programs and scripts to update content, structure, and style of documents dynamically. It is platform- and language-neutral. The DOM is not HTML nor is it JavaScript. It is something like the glue that binds them together.

DOM Level 0

The DOM level 0 is a mix of HTML functions that have not been formally specified that allow scripting languages to interact with Microsoft Internet Explorer 3.0 and Netscape Navigator 3.0. This basically means that if a DHTML page is compliant with DOM level 0 it should work reliably even in fairly old browsers.

The base structure of the DOM level 0 is the document master container. This refers to the entire document, and all elements within it. It is referenced as:

document

Because the DOM level 0 is very basic, it only allows the developer to manipulate items on the page that already have some level of interactivity, i.e. forms. It is possible to reference other items in a Web document, but most browsers don't support much interactivity with them at level 0.

Referencing Forms

There are three ways to reference a form control using DOM level 0:

by name or id
This is the easiest way to reference a form control, as you can clearly see in the XHTML which form you a referring to. For example, this form is named "form1":

<form name="form1" id="form1">...</form>

It would be referenced in the DOM as:

document.form1

Then if you wanted to reference an element within the form, you would name it as well:

document.form1.fname

references

<input type="text" name="fname" />

in the above form.

by number
Each form, and element within the form, is given a number in an array, starting with 0. They are numbered starting with the first <form> element found in the flow of the document. So, to reference the second form on the page:

document.form[1]

Then, to reference the second form element within the second form:

document.form[1].element[1]

a combination of both
It is possible to use any combination of number or name to reference a form or form element within the document:

document.form[0].fname
 document.form1.element[3]

Other DOMs

The W3C has several recommendations for different DOM levels. These levels provide more control and power over the Web documents. But there are also DOMs for other browsers and user agents. These DOMs are not standardized, but if you want to write DHTML for a specific browser only, it would help to learn the specific DOM for that browser.