29.3. 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 JavaScript:
document.images["start"]
Images, along with some other common elements, such as forms and links, get special treatment in the DOM, so they can be referenced using this simple syntax. For regular HTML elements, like headings and paragraphs, the technique is a bit different. Consider the following HTML document:
<html> <head> <title>Sample Document</title> </head> <body> <h1>An HTML Document</h1> <p id="simple">This is a simple paragraph.</p> </body> </html>
To refer to the paragraph element in this document, we can use the following JavaScript:
document.getElementById("simple")getElementById( ) is a method, or built-in function, of the document object. It returns the HTML element with the specified id attribute in the document, which in this case is the paragraph we are interested in. The document object also has a number of other methods for accessing HTML elements, such as getElementsByTagName( ) and getElementsByName( ).
Just referencing an object isn't particularly interesting, however. What we really want to be able to do is manipulate the object, say by changing its appearance or location. One way to manipulate an object is to change its properties, which describe different characteristics of the object. In most cases, these properties actually correspond to attributes of the HTML element represented by the object. For example, an image object has a src property that corresponds to the src attribute of the <img> tag. We used this property to implement image rollovers in Chapter 28, "Introduction to JavaScript".
Table 29-1 lists the DOM objects for some common HTML elements, along with some of their properties.
Table 29-1. DOM objects and their properties
With DHTML, the style property is by far the most important property. It lets you access all of the CSS properties that apply to a particular element, so you can use it to change things like the color, font family, and font size of an element. For example, here's how we can change the color of our simple paragraph to green:
document.getElementById("simple").style.color = "00FF00"; |  |  |
| 29.2. How DHTML Works |  | 29.4. Creating Layers |
Copyright © 2002 O'Reilly & Associates. All rights reserved.