Cascading Style Sheets (3), ho-ho!

#something { ... }

span.nothing { ... }

...

DHTML is not a standard; it is a marketing term that Netscape coined and Microsoft adopted to describe some new features of its browsers from Version 4 onward.

Of course, there is a consequence of this being a marketing term: You can kiss compatibility goodbye. Well, you can kiss complete compatibility goodbye, as there is significant commonality between the implementations - most things you want to do with DHTML will work in either browser. But the devil is in the details . . . and in the bugs in the browsers (which are problems that are not just cross-vendor but cross-version as well - but what did you expect?).

Underpinning DHTML is the document object model (DOM), a map of the contents of a Web page. The DOM is a schema that provides a way of identifying the components that make up a given Web page starting from the root object and decomposing into sub-objects.

At the root of the DOM is the browser window named (no surprise) window, and any element must start with the object window. So to get to the elements in a document displayed in a browser, we refer to a path that begins "window.document" although just "document" is usually used.

So let's say you have a button defined such as:

This image is a named element under the images objects branch of the DOM, and you would refer to it as window.document.images.pic1 or document.images.pic1. Changing this element with JavaScript is as simple as this:

document.images.pic1.src="pic1state2.gif"

This means you can dynamically change the properties of an on-screen element under IE4+ and NS6+. Moreover, under IE4+ and NS4+ you can hide or show elements, change the Z-index (the depth of elements on screen), control the position of elements, move elements on screen and let users move screen elements. And for IE5+ and NS4+, you can change the clipping of an object - the amount of the object that is displayed.

As you might guess, there are many differences between the DOMs of Microsoft, Netscape and other browser vendors. For example, below the window object under Internet Explorer and Netscape browsers are the object's document, history and location. Then the browser's DOMs part ways: The Netscape DOM also has frames at this level, while Microsoft's DOM includes toolbar, packages and navigator.

For the purposes of manipulating content though, we are concerned only with the document branch of the DOM, and here is where standards exist, which we'll discuss next week.

Styled comments to gearhead@gibbs.com.