| home / programming / professional / chap6/ 2 |    [previous] [next] |
|
|
|
While Microsoft's DOM is progressive and fairly easy to use, the Netscape DOM isn't. It's a very complicated set of rules and, even when you apply them perfectly, you can still encounter weird problems.
The Netscape DOM is supported by Netscape 4. However, the Mozilla project, which produces the code engine for Netscape 6+, has decided to completely remove the Netscape DOM since it was unworkable. Escape and Omniweb also support the Netscape DOM.
The Netscape DOM is founded on the layer object. A layer is a separate part of an HTML page that sometimes acts as a separate page altogether. You can change a few of its styles, notably for moving the layer or making it invisible. It's also possible to load a separate HTML page into a layer, though this is rarely done.
Netscape 4 also introduced a <layer> tag, but using it is not a very good idea. No other browser supports it: not even Netscape 6. Besides, using this tag is not necessary, since layer objects are also created by elements that have their position set to absolute or relative.
Let's take our DHTML example code from above:
<div id="testdiv" style="
position: absolute;
top: 50px;
left: 50px;
font: 12px verdana;
border: 1px solid #000000;">
This is the test DIV<br />
<a href="javascript:changeIt()">Change</a> its
position
</div>
Since this <div> is positioned absolutely, Netscape 4 counts it as a layer. It's then possible to move it, just like we did in the other DOMs. We can get the layer by id and then change its left property. Note however, that the Netscape DOM doesn't know the style property.
Theoretically, our code would become:
function changeIt() // Netscape DOM
{
document.layers['testdiv'].left = 0;
document.layers['testdiv'].position = 'relative';
document.layers['testdiv'].font = '20px verdana,arial,helvetica';
document.layers['testdiv'].textAlign = 'right';
}
However, if you try this you'll immediately notice that Netscape 4 only executes the changing of the left style. All other style changes are ignored. Netscape 4 simply can't handle them.
Property |
Read/write |
Description |
| background.src |
read/write |
The source of the background image. |
| bgColor |
read/write |
The background color. |
| clip |
read/write |
The clipping of the layer. Contains clip.top, clip.bottom, clip.left, clip.right, clip.height, and clip.width. |
| document |
read-only |
The document inside the layer. This is necessary whenever you want to access an HTML element within the layer (a form or an image, for instance). |
| left |
read/write |
The left position of the layer. |
| src |
read/write |
The source of the layer. By changing this property, you can load another page into the layer. |
| top |
read/write |
The "top"position of the layer |
| visibility |
read/write |
The visibility of the layer. This takes four values: show and hide or, equivalently, visible and hidden. When reading out the visibility value, Netscape 4 always returns show or hide. |
| zIndex |
read/write |
The z-index of the layer. |
These properties are the only style properties that can be changed in Netscape 4. Changing any other style simply won't work. Even when you change the properties mentioned in this table, you may find that the effect sometimes won't work or works strangely.
Netscape 4 treats layers as separate documents. So, to access elements inside a layer, you must first access the layer object itself. For instance, to access the link in the <div>, a simple reference to:
document.links[0]
should be enough. After all, it is the first (and only) link in the document. But in Netscape 4, this DOM reference doesn't work. It considers the link to be inside the layer. Therefore you must access it as the first link in the document in the layer with id="testdiv". Thus, to access the link, you need this code:
document.layers['testdiv'].document.links[0]
This also goes for images and forms, and even for other layers.
| home / programming / professional / chap6/ 2 | [previous] [next] |
The Network for Technology Professionals
Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | E-mail Offers
|
Video: How System Center Helps Reduce IT Costs IBM Cloud Computing for Developers Virtual Event, April 6-8 |
Microsoft Video: OCS and Exchange: Platform Futures MORE WEBCASTS, PODCASTS, AND VIDEOS |
Created: March 11, 2003
Revised: March 28, 2003
URL: http://webreference.com/programming/professional/chap6/2
