The Document Object Model (DOM) is the model that describes how all elements in an HTML page,
like input fields, images, paragraphs etc., are related to the topmost structure: the
By calling the element by its proper DOM name, we can influence it.
This page treats the two Intermediate DOMs and a bit of the Level 1 DOM. Goal is to teach you how to write cross-browser DHTML.
First of all, I'll talk a lot about the Intermediate and the Advanced DOMs. My definitions are:
document.layers) and Microsoft (
On this page I first give some general principles of the advanced DOMs, then I describe the three advanced DOMs as far as they relate to DHTML:
I don't think I'll ever research the non-DHTML aspects of the two Intermediate DOMs. They're on the way out and compared to the Level 1 DOM they're too restrictive to be of much interest.
Where the Level 0 DOM only provided access to a limited number of HTML elements, from the Version 4 browsers onwards, browser makers have tried to make the DOM more generic, so as to provide access to all elements on an HTML page and to give us web programmers a way to play with their properties. Not everything works in all browsers, but progress is being made.
The reason for providing advanced DOMs was to make DHTML possible: the changing of style sheets through
be influenced. Exactly what elements can be influenced, depends on the browser. Netscape 4 only allows
layers, while Explorer 4 allows influencing of much more HTML elements.
This was the birth of the advanced DOMs First of all Netscape and Microsoft each thought
up their own DOM,
document.all respectively; I call these the
Intermediate DOMs. After that came the Level 1 DOM, implemented in Mozilla and Explorer 5. The Level
1 DOM can do a lot more than just DHTML, but for the purpose of this page I stick to the DHTML part
Let's take the example from the Introduction to DHTML page: we
want to move an element to a position 200 pixels from the left side of
the screen. In this example the element to be accessed is
Through the DOM this is no problem. The
document has a kind of 'sub-document' dealing with
tobechanged and its property
left. If you access and change
tobechanged.left correctly, the object
tobechanged on the screen moves
to the desired position at 200 pixels from the left.
The problem, of course, is that there are three different advanced DOMs and that the
tobechanged has a different name in each one. So your script has to deal with all three DOMs to
create a true cross-browser effect. This is not extremely difficult, it's just very precise work.
Since the DOM of the Version 5 browsers is the most advanced one and is likely to stay in business through several future browser versions, I describe it first.
This DOM gives the script the opportunity to get an element and perform some DHTML magic on it. To get the <DIV> in the example, we do:
Now we have got the element by ID, which of course is
tobechanged. When we want to change
left to 200 pixels, we say
document.getElementById('tobechanged').style.left = 200;
and the magic is ready.
The new DOM has many more possibilities. See the
Level 1 DOM page for more information.
For now, since we want to create effects that work in Version 4 browsers, too, enough is said.
The DOM of Explorer is quite similar. In Explorer 4+, to make the DIV move to its new position, we do either of these two things:
document.all['tobechanged'].style.left = 200; document.all.tobechanged.style.left = 200;
As you see, in Explorer 4
document.all gives access to the elements. You still
have to write some lines of code specifically for Explorer 4, but you only need to
copy the Version 5 script and change
To provide backward compatibility, Microsoft has also included this old DOM in Explorer 5. If
you script for Explorer 4 and 5 only, using
document.all is enough.
This DOM, also, has many more possibilities. However, Microsoft has removed all references to
document.all from MSDN, so I can only guess at these possibilities. To make matters more
complex, Microsoft now refers to the Level 1 DOM as the 'Document Object Model' and to the
document.all DOM as the 'DHTML Object Model'.
Now we get to the dirty part. Netscape 4's DOM is considerably different from the other two. Besides being theoretically questionable, it is also buggy. In fact, even Netscape now thinks it is no good because in an unprecedented move it dumped the whole Netscape 4 DOM and replaced it with the new DOM in Mozilla, thus sacrificing backward compatibility to obtain a fresh start.
Netscape 4 uses layers as leading concept of its DOM. Layers basically provide access to elements, like their counterparts in the other browsers, but there are several specials too:
<LAYER>tag. Since it is not supported by the other browsers (not even Mozilla), I advise you to stay away from it and use
positionin it, in addition to the
IDthat's mandatory in all browsers.
document.layerscontains everything that's inside a layer, like images, forms etc. This means that, contrary to the other DOMs, you first have to access the correct layer before accessing an image, form or other layer inside it.
Our example, however, is simple. If we use either of these two lines
document.layers['tobechanged'].left = 200; document.tobechanged.left = 200;
we get the same effect as in the other browsers.
Apart from providing access to the layer itself and the HTML elements inside it, this DOM does not have very many possibilities. It's the worst DOM around and I don't mind that it's on the way out.
One of the worst things of the
document.layers DOM is that Netscape 4 sees each layer as a
separate document. HTML elements inside a layer cannot be accessed normally through the document, you
first have to access the layer.
Let's take this example, with our DIV with ID="tobechanged" inside another DIV with a
declaration in the style sheet:
<DIV ID="stuff"> <DIV ID="tobechanged"><IMG NAME="testimage"></DIV> </DIV>
To reach the layer
tobechanged, the code for the other browsers would still work.
They look at
ID only and can still access the element in the way described above.
But Netscape 4 now suddenly cannot find
document.tobechanged and produces
error alerts. The layer
tobechanged is not contained by
document but by
So the Netscape 4 code becomes on of these:
document.stuff.document.tobechanged.left = 200; document.layers['stuff'].document.layers['tobechanged'].left = 200;
What about the image
NAME="testimage"? In Netscape 4 the good old
Level 0 DOM call
does not work, because the image is not inside the document but inside the layer. Correct calls are:
I've written a DHTML micro-API that solves DOM problems for you. If you'd rather view a practical application you can study the DHTML example.
If you want to finish the DOM Trilogy, go to the Level 1 DOM page.