A Complete Guide to Web Design

The Document Object Model 431

DHTML

The Document Object Model

Web Design in a Nutshell, eMatter Edition

Learning DHTML

Because both Netscape and Microsoft have pledged support for the emerging W3C
standards, time spent learning DHTML is well spent. Knowledge gained today will
not become obsolete and will give you a head start once DHTML is standardized
for all browser manufacturers.

In rating the difficulty of all web design skills, DHTML falls somewhere in the
middle. It isn’t as difficult as Java or Perl programming, but it is more difficult than
regular HTML.

You should first experiment with visual DHTML development tools such as
Dreamweaver 1.0 or Fusion 3.0 before you begin coding DHTML by hand. A
visual tool will allow you to get a feel for DHTML technology rather quickly. After-
wards, if a tool doesn’t meet your needs, begin coding by hand.

Tools are discussed again at the end of the chapter. After reading the sections on
browser differences and DHTML examples composed manually, it should give you
a greater appreciation of the time and effort a tool can save you.

Browser Differences

In order to create DHTML content available to the largest audience, you will need
to understand the differences between Microsoft’s and Netscape’s DHTML.
Although both Netscape and Microsoft implement DHTML, they do so very
differently.

Both Netscape 4.0 and Internet Explorer 4.0 support the Cascading Style Sheet
Positioning (CSS-P) standard as established by the W3C. CSS-P (now rolled into the
CSS Level 2 Specification) specifies settings for attributes of distinct objects in an
HTML document. These objects are generally words or text. By accessing
attributes, objects can be hidden, shown, and layered.

Although both browsers use CSS-Positioning, Microsoft and Netscape have applied
this to HTML objects differently. Dynamic objects in a Netscape browser are called
layers. Netscape has created atag to add such items to a document.
Dynamic objects in Internet Explorer are referred to asstyles. Web designers must
create DHTML documents that utilize both implementations of CSS-Positioning.

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