Cascading Style Sheets (4), woo-hoo!

Welcome to week four of Cascading Style Sheets. Last week we began a descent into the depths of Dynamic HTML, a quasi-standard that lets scripting languages modify HTML content (which includes CSS) to make Web content dynamic. We started in on the architecture that defines the content of a browser window: the document object model.

But we didn’t mention the relationship of XML to DHTML. You treat an XML tag like an HTML tag, although to be rendered the browser must support XML and the XML content must be declared (let us know if you’d like us to look at this topic).

We concluded last week threatening to discuss document object model (DOM) standards, so here goes: In books and online you will find references to the Netscape Layer DOM, the Microsoft IE All DOM and the World Wide Web Consortium’s (W3C) ID DOM.

These were all versions of DOMs that are now effectively obsolete unless you need to support older browsers.

Today, the working DOM for browsers is the W3C’s DOM. Here’s the W3C DOM Working Group’s description of the specification: “This document contains the requirements for the DOM, a platform- and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure and style of documents. The DOM provides a standard set of objects for representing HTML and XML documents, a standard model of how these objects can be combined and a standard interface for accessing and manipulating them. Vendors can support the DOM as an interface to their proprietary data structures and APIs, and content authors can write to the standard DOM interfaces rather than product-specific APIs, thus increasing interoperability on the Web.”

Dissecting DOM

The DOM specification contains several layers: Level 1 is the core for HTML and XML document models, with functionality for document navigation and manipulation. Level 2 includes a style sheet object model, defines functionality for manipulating style information attached to a document, enables traversal of the elements of a document, defines an event model and provides support for XML namespaces. Level 3 (which is not yet finished – see details) will specify document loading and saving; content models with document validation support; address document views; and formatting, key events and event groups.

The DOM Level 1 and Level 2 specifications are final, so developers can implement them without fear of the specifications changing.

Using the DOM you can create, read and modify elements in the structure of a document loaded in a browser window using a scripting language embedded in the document. We’ll consider JavaScript, although you could use other scripting languages such as VBScript and Perl.

But if that is all there was to the DOM, there wouldn’t be much dynamism involved. Nope, the DOM also includes event handlers that are triggered when certain things happen to or in a document or an element in a document.

There are many types of events, including object events (onLoad), element events (onFocus), and mouse events (onMouseOver, onMouseOut). See a complete list and an in-depth description; or get a simpler description of the events that apply to HTML 4.0. As a simple example, consider the following code that would be in the body of a document:

The event handlers in this code reference the object document.images.strangedevice, which is the identity of the image tag the event handlers are embedded in. The image tag initially displays the contents of the file flagdown.jpg, but when the mouse is moved over the image the event onMouseOver is triggered, causing another image named flagup.jpg to load. When the event onMouseOut is triggered, the original image, flagdown.jpg, is reloaded.

The image object could be referred to as images.strangedevice (the root object, document, is implicit), or just strangedevice because it is a unique ID in the document (although that could lead to errors).

Next week, a more complex and generic version of the image rollover above.

Your code to gearhead@gibbs.com.