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 document itself.
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.
For general information about DOMs, a bit of history and the Level 0 DOM, see the Level 0 DOM page. For the new W3C DOM, see the Level 1 DOM page.
First of all, I'll talk a lot about the Intermediate and the Advanced DOMs. My definitions are:
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 JavaScript. All of a sudden the browsers had to provide access to all elements on a page that could be influenced. Exactly what elements can be influenced, depends on the browser. Netscape 4 only allows influencing of 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.layers and document.all respectively; I call these the Intermediate DOMs. After that came the Level 1 DOM, implemented in Netscape 6 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 only.
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 <DIV ID="tobechanged">.
Through the DOM this is no problem. The document has a kind of 'sub-document' dealing with the object 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 object 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.
Supported by:
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:
document.getElementById('tobechanged')
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 for both Version 4 and Version 5 browsers, enough is said.
Supported by:
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 getElementById('') to all[''].
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'.
Supported by:
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 Netscape 6, 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:
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 position
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 document.stuff.document!
So the Netscape 4 code becomes on of these:
document.stuff.document.tobechanged.left = 200; document.layers['stuff'].document.layers['tobechanged'].left = 200;
I found out the hard way that it is sometimes necessary to put window before the first document in Netscape 4 on Mac.
What about the image NAME="testimage"? In Netscape 4 the good old Level 0 DOM call
document.images['testimage']
does not work, because the image is not inside the document but inside the layer. Correct calls are:
document.layers['stuff'].document.images['testimage'] document.stuff.document.images['testimage']
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.