29.3. The Document Object Model
Say we have HTML code that looks like this:
<IMG SRC="start.gif" NAME="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>
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( ).
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";
Copyright © 2002 O'Reilly & Associates. All rights reserved.