Javascript [Electronic resources] : The Definitive Guide (4th Edition) نسخه متنی

17.4 DOM Compatibility with Netscape 4

Netscape 4 does not even come close to
implementing the DOM standard. In particular, Netscape 4 provides no
way to access or set attributes on arbitrary elements of a document.
Netscape 4 supports the Level 0 DOM API, of course, so elements such
as forms and links can be accessed through the
forms[] and links[] arrays, but
there is no general way to traverse the children of these elements or
set arbitrary attributes on them. Furthermore, Netscape 4 does not
have the ability to "reflow" document content in response
to changes in element size.

Despite these restrictions, Netscape 4 does provide an API that
allows access to and manipulation of the crucial "dynamic
elements" used to implement DHTML effects. In the Netscape 4
API, these elements are known as

layers ; they float above the rest of the
document and can be moved, resized, and modified independently of the
other elements of the document. Layers are typically implemented
using CSS style sheets, and the Netscape 4 Layer
API is discussed in detail in Chapter 18.

What follows is simply an overview that explains how you can create,
access, and modify the content of individual layer elements within a
document. Although Netscape 4 does not support anything like the DOM
standard, its Layer API allows you to achieve some of the same
dynamic effects that are possible with the standard API. Note that
the Layer API was submitted to the W3C for consideration as part of
the DOM standard, but no part of this API was ever standardized.
Because Netscape 6 is based on a complete rewrite of Netscape 4, the
Layer API has been abandoned and is not supported in Netscape 6 (or
in Mozilla).

Layers can be created in a document using the
<layer> tag, a proprietary Netscape
extension to HTML. More commonly, however, you create a layer in a
Netscape 4 document using standard CSS positioning attributes (which
will be explained in detail in Chapter 18). Any
element made dynamic with CSS style attributes is treated as a layer
by Netscape 4 and can be manipulated using the Layer API. (Note,
though, that Netscape 4 does not allow all elements to be made
dynamic. To be safe, a <div> wrapper element
is usually used around any element that is to be dynamic.) JavaScript
can also dynamically create layers using the Layer(
) constructor, which you can read about in the client-side
reference section of this book.

Once you've created dynamic elements, or layers, in your
document, Netscape 4 allows you to access them via a simple extension
of the Level 0 DOM API. Just as you access form elements through a
forms[] array and image elements through an
images[] array, so do you access layers through a
layers[] array of the Document object. If the
first layer in a document has a name attribute of
"layer1", you can refer to that layer element with any of
the following expressions:

document.layers[0]         // Index the array with a number
document.layers['layer1']  // Index the array with an element name
document.layer1            // Named layers become a document property 

If a layer has no name
attribute but has an id
attribute,
the value of this attribute is used as the layer name instead.

Layers in your documents are represented by Layer objects that define
a number of useful properties and methods you can use to move,
resize, show, hide, and set the stacking order of the layer. These
properties and methods are related to CSS style attributes and will
be discussed in Chapter 18. The most interesting
thing about the Layer object is that it contains a Document object of
its own: the content of a layer is treated as an entirely separate
document from the document that contains the layer. This allows you
to modify the content displayed by a layer by dynamically rewriting
the content of the layer using the document.write(
) and document.close( ) methods. You can
also dynamically load documents into a layer using Layer's
load( ) method. Finally, note that layers may
themselves contain layers, and you can refer to such
nested layers
with expressions like this:

// The second layer nested within the layer named "mylayer"
document.mylayer.document.layers[1];