home | O'Reilly's CD bookshelfs | FreeBSD | Linux | Cisco | Cisco Exam    

Dynamic HTML: The Definitive Reference, 2rd Ed.Dynamic HTML: The Definitive ReferenceSearch this book

2.4. Netscape 6 (Mozilla) DHTML

A primary design goal of the Mozilla browser engine behind Netscape 6 was support for industry standards. Abandoning a large portion of the earlier version code allowed the browser engineers to approach internal mechanisms anew. In the end, the Netscape 6 browser supports far more HTML, CSS, and DOM features than earlier versions. As a driving force behind the core ECMA language specification, the company also assures compliance with that standard. Finally, a brand new rendering engine that reflows dynamic content brought this browser up to the same DHTML expectations as Internet Explorer.

As the basis for most dynamic content scripting, the W3C DOM brought with it a new abstract object model. Even though some W3C DOM features had been implemented in varying stages of IE during the Version 5 and 5.5 lifetimes, content authors had little imperative to switch over, because the Microsoft model was the only one needed to work with IE's DHTML capabilities. Even Opera adopted IE's basic DHTML model. But with the W3C DOM the only route available for scripting Netscape 6 and the perceived "correctness" of following standards, content authors had reasons to get to know the terminology and concepts that had not existed prior to the W3C standard.

The close association between Netscape 6 and standards sometimes makes it difficult to separate the two efforts. But keep in mind that both tracks are still evolving at their own paces, and it is generally easier to add features to a standard than it is to produce a new browser release that implements those features. The browser that supports 100% of all current standards' requirements does not exist and most likely will never exist, unless the standards stop evolving for a few years. The Netscape 7 browser implements only a handful of new DOM items not already supported in Netscape 6. Except as noted in Chapter 9, you can regard Netscape 7 as a more mature, tested, and bug-fixed version of Netscape 6.

2.4.4. Dynamic Content

Drafters of the W3C DOM standard produced a system that provides a high level of conceptual consistency for the way scripters modify portions of a document's content. This was done, however, at the expense of simplicity.

The easiest content to modify is text that is contained by an element. Such text is represented in the DOM as the value of a text node, and is handled through strings in JavaScript. But when it comes to modifications involving elements, the W3C DOM approach gets a bit wordy. To create a new HTML element and its content in pure W3C DOM syntax requires the following sequence:

  1. Create an empty element for the desired tag with the document.createElement( ) method.

  2. Assign values to its individual attributes one at a time, preferably via the element's setAttribute( ) method.

  3. Create a text node for the content with document.createTextNode("newtext").

  4. Use a variety of node methods to construct the node tree of the new element and its content.

  5. Use another method to insert the new node group into a position within the document's existing node tree.

If the content your scripts need to generate has lots of elements and text nodes, the sequence requires many more statements. The concept of creating an empty object, populating its attributes or properties, and then inserting the object into its rightful place permeates the W3C DOM, and not only for document content. The phrase "Create, Populate, Insert" will become your mantra.

Netscape recognized, however, that developers found some nonstandard, IE DOM features to be very convenient. As a compromise to practicality over blind adherence to the standards, the Mozilla DOM engine implements the IE innerHTML property for any element. This allows scripts to assemble new content as if it were a string of HTML source code to be inserted where desired. Chapter 5 will compare these approaches.

Separately, table elements benefit from a series of methods and properties—shared with the IE model—that make radically dynamic tables easily scriptable. The regularity of table rows and cells encourage the use of tight loops to repopulate a table with new or sorted data from JavaScript arrays or XML data (see Chapter 5).

2.4.5. The Event Model

The W3C DOM Events module introduced some new terminology for scripters already experienced with DHTML scripting in earlier browsers. Event handlers became known as event listeners, meaning that scripts instruct elements to "listen" for events of particular types, such as clicks, key presses, and so on. When an element "hears" that event type, processing shifts to a function, just like the event handler functions you are used to.

An event object contains numerous properties about the details of the current event being processed. Interestingly, the environment for the W3C DOM event object more closely resembles the defunct Navigator 4 event model. An event listener's function receives the event object as a function argument (in contrast to the window-based object in the IE event model).

Event propagation is modeled after both the IE and Navigator 4 event models. The default propagation model allows events to bubble upward through the element containment hierarchy, as described earlier for the IE model. But events also trickle downward through the hierarchy. To process an event on its way to its actual target, however, a script must instruct an event listener to capture the event. Microsoft also added the event capture option to its event model for IE 5, so the two models can be made to work very much like each other, despite major discrepancies elsewhere.

One area in which the W3C DOM model is much more conservative is in the breadth of event types. Because this model is not operating-system-dependent, it has so far settled on a basic set of events that let scripts work with common mouse and system events. Due to international character set intricacies, keyboard event details are not part of DOM Level 2, but Netscape 6 implements the basic events that are likely to be compatible (or not conflict) with the finished specification for DOM Level 3.

Library Navigation Links

Copyright © 2003 O'Reilly & Associates. All rights reserved.