A Complete Guide to Web Design

432 Chapter 24 – Introduction to DHTML

The Document Object Model

Web Design in a Nutshell, eMatter Edition

HTML page itself and everything in it. All of the objects contained within the

HTML page, such as images and forms, “branch off” from the original HTML page

or document, like branches from a tree trunk.

Using JavaScript you can reference these branches by naming each object, from

the root to the branch, and separating their names with periods, like this:

document.images["image_name"]

The HTML code that gives an image its name looks like this:

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

While the document object is legally part of the window object

(window.document), the window object doesn’t usually have to be

explicitly referenced. Thus we reference document.images, not

window.document.images.

For the most part, Netscape and Internet Explorer use a similar DOM. However,

when working with more complicated Web pages—that is, pages with position-

able objects placed in a stacking order—Netscape’s DOM and Internet Explorer’s

DOM differ greatly.

Referencing Objects in Netscape and IE

In Netscape, positionable objects are placed in layers with the<LAYER>tag or

with CSS-P. You access a Netscape layer like this:

document."layer_name"

A layer is considered a separate document that contains its own objects. In

Netscape, JavaScript would reference an object contained in a layer in this manner:

document."layer_name".document.images["image_name"]

The left-most document object refers to the actual HTML page. Next comes the

name of the layer. The second “document” refers to the document contained in

that layer. Finally,images["image_name"]references the actual image within the

layer that you want to access. Thus the image named “start” (remember we use the

image’s name, specified in the<img>tag—not its filename) on thecontrolslayer

is referenced:

document.controls.document.images[start]

In Internet Explorer, objects are referred to as “styles.” IE’s DOM allows you to

reference all style objects within the root document. This is done through theall

property. A named style object looks like this:

document.all."style_name".style

Thus we would access a style namedcontrolslike this:

document.all.controls.style