Web Design in a Nutshell, 2nd Edition

The Document Object Model

The Document Object Model exposes every element of an HTML page to a scripting language, such as JavaScript. Early iterations of the DOM, now called DOM Level 0 and retained for backwards compatibility, gave scripts access to only some objects on a page, including forms, frames, and images. DOM Level 1 and DOM Level 2, however, allow you to access and change almost any part of an HTML (or XHTML) document, so you can modify, add, or remove attributes or even entire elements. (For more information on the DOM specifications, see http://www.w3.org/DOM/.)

In JavaScript parlance, each element of the page is an object. The DOM begins with a base object called the document object, which refers to the HTML page itself and everything in it. All the elements contained within the HTML page, such as headings, paragraphs, images, forms, and links, are represented by separate objects. These objects branch off from the document object, like branches from a tree trunk, to form a hierarchy of elements.

To do something such as changing the appearance of a particular element in an HTML document, you first have to reference the object that corresponds to that element. Let’s start with a simple example, where we want to reference a particular image in an HTML document. Using JavaScript, the general form of the reference is:

document.images["image_name"]

Say we have HTML code that looks like this:

<IMG SRC="start.gif" NAME="start">

To refer to this image, we can use the following ...