Web Design in a Nutshell

The Document Object Model

Many of the differences between Netscape DHTML and Internet Explorer DHTML stem from their incompatible implementations of the Document Object Model (DOM). The Document Object Model exposes every element of an HTML page to a scripting language such as JavaScript. Early iterations of the DOM gave scripts access to only some objects on a page such as forms, frames, and images. Internet Explorer 4.0 and Netscape 4.0 have expanded their DOMs and therefore exposed more objects to scripting.

The DOM begins with a base object called the "window,” which refers to the browser window itself. Within the window object is the document object (as well as other non-document objects, such as frames). The document object refers to the 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">

Note

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 ...