Which DOM to use.

When I first wrote this page the Document Object Model was a new concept that was just in the process of being added into JavaScript. At that time both Internet Explorer 4 and Netscape 4 (the two most popular browsers of the time) had implemented their own proprietary DOM and it was only the newer browsers released after that time that supported the standard Document Object Model. As the two browsers to implement proprietary DOM code are now long gone there is no reason for any new JavaScript to even consider either of those alternatives.Any id in the web page can be accessed directly from JavaScript by using:


The document.all DOM used by Internet Explorer and the Document.layer DOM used by Netscape 4 are now only of historical interest - as an explanation of why scripts written before 2005 will have included such code. Of course even with old code that caters for all three Document Object Models there is something that JavaScript developers can learn about the right and wrong ways of writing code to support different browsers.

Below on this page is the original article that I wrote on how to set up code that will work out which of the three DOMs to use based on which browser it is. There are a few things to note about how the code is written.

First the code tests if the standard DOM is supported. Even back when this code was needed it was preferable to use the standard DOM where the browser supports it (which all browsers now do so that path will now always be followed through the code today and the other two alternatives have effectively removed themselves from the processing even though they might still be referenced in the code. Also all of the code is self contained so that if the findDOM() function were being used on lots of web pages it can be easily modified to drop support for the two obsolete document object models by reducing the function code to:

function findDOM(objectId, wS) {
return wS ? document.getElementById(objectId).style: document.getElementById(objectId);}

Another thing to note in the code in the original article is that feature sensing is used to detect if the standard or IE DOM is supported. Had browser sensing been used for this then the code would have needed to be updated when IE5 was released in order to test which version of IE that it was and to only use the document.all DOM for IE4.

The code does use browser sensing to detect if the browser is Netscape 4 but there are a couple of special circumstances that dictated this approach and made it usable. A bug in the feature sensing in Netscape 4 meant that testing if document.layers was supported didn't always work depending on whether the script was embedded in the HTML or in a separate file. This made it one of the very few situations where feature sensing therefore couldn't be used due to a browser bug. The other consideration is that Netscape 4 was the only browser to support this particular document object model as the following version of Netscape was completely rewritten and only supported the standard DOM. It was therefore safe to use browser sensing in this instance as the browsers that support this particular code would never change.

Even with the standard DOM there will still be instances where you may need to use feature sensing to determine if the particular browser supports a given DOM command (all browsers now support getElementById but there are a large number of other DOM commands which actually make the document object model the biggest single section of JavaScript to learn). See the DOM Basics, DOM table, and DOM Form examples on my JavaScript site for information on how to use some of what the DOM now allows you to do with JavaScript.

Original DOM Script

The following text was originally written in 2000 just after IE4 and Netscape 4 were released and was changed to show how to comment out the parts of the code that became unnecessary when IE4 died. As Netscape 4 is now also long dead the information below is more of interest in what code you need to look for to replace with that mentioned above when you are upgrading an old script.

The Document Object Model is a relatively recent addition to web page processing that has been added to enable more interactive pages to be built. Due to the delays that were experienced in having the Document Object Model added to the web standards (administered by W3C), Internet Explorer 4 and Netscape 4 both implemented their own versions of DOM. This means that for those browsers that support a Document Object Model, there are three different DOMs that might be in use.

To be able to make use of a DOM in making our page more dynamic, we need first to determine if a DOM is supported by the browser used by visitors to our page, and if so which DOM is supported. Note that it is the browser used by the visitors to your site that will be used to display your page and for pages on the internet, you have no control over which browser they will use - so you need to cater for those still in use by anyone.

The best way to determine this is to test the browser for each DOM in turn to see if the DOM is supported. Testing the browser for feature support is the preferred way rather than testing for the specific browsers that support a particular DOM since there may be visitors using browsers you haven't considered but which support a particular DOM.

The preferred DOM to use (assuming the visitor's browser supports it) is the one defined in the internet standards. This DOM is supported by IE5+, Netscape 6+, Opera 5+, and (probably) most other recently written browsers. To test if a browser supports this DOM you can use the following javascript code.

 if (document.getElementById) {standardDOMsupported = 1;}

To test if a browser supports the Internet Explorer DOM we would have used the following code:

 if (document.all) {ieDOMsupported = 1;}

Similarly, we could test for document.layers to test for the Netscape DOM support however a bug in the Netscape browser means that this doesn't work if the code is contained in an external javascript. As the Netscape DOM is only supported by version 4 of Netscape (having been removed from version 6) we can test specifically for the Netscape 4 browser instead using the following code:

browserVersion = parseInt(navigator.appVersion);
if ((navigator.appName.indexOf('Netscape') != -1) && (browserVersion ==4)) {netscapeDOMsupported = 1;}

So now we can combine all of these statements together and we get a piece of code that will determine for us which DOM (if any) is supported by the visitor's browser.

 var DOMsupported = 0;
var standardDOMsupported = 0;
// var ieDOMsupported = 0;
var netscapeDOMsupported = 0;
if (document.getElementById) {standardDOMsupported = 1; DOMsupported = 1;}
// else { if (document.all) {ieDOMsupported = 1; DOMsupported = 1;}
else {browserVersion = parseInt(navigator.appVersion);
if ((navigator.appName.indexOf('Netscape') != -1) && (browserVersion ==4)) {netscapeDOMsupported = 1; DOMsupported = 1;}}

Once this code has been processed the value of DOMsupported will be true if any of the DOMs is supported by the browser and one of standardDOMsupported or netscapeDOM supported will also be true depending on which is the best DOM supported by the browser. (the commented code is no longer required but was used to test for IE4)

Now all that we have to do is to use this knowledge to reference the objects on the page using the appropriate name depending on which DOM that we have determined that the visitor's browser is using. The easiest way to do this is to set up some common code that will set a field name that we specify to point to the particular object that we are interested in using whichever is the appropriate DOM. Say that we have a field (let's call it myObject for convenience). To reference this object via the DOM we can use the following code that will return a pointer to the given object allowing it to be manipulated regardless of which of the three DOMs is being used:

 function findDOM(objectId) {
if (standardDOMsupported) {return (document.getElementById(objectId));}
// if (ieDOMsupported) {return (document.all[objectId]);}
if (netscapeDOMsupported) {return (document.layers[objectId]);}
// and the following code to call the above function
myField = findDOM(myObject);

We can now manipulate the objects on our page to do anything except changing the style attributes without having to worry about which DOM the browser supports. The different DOMs handle the way that they reference the style attributes of our objects in slightly different ways. We can modify the function that we have to cater for this by passing an extra flag that tells the function whether or not we are trying to access the style attributes. The function code with this added now looks like this:

 function findDOM(objectId, wS) {
if (standardDOMsupported) return wS ? document.getElementById(objectId).style: document.getElementById(objectId);
// if (ieDOMsupported) return wS ? document.all[objectId].style: document.all[objectId];
if (netscapeDOMsupported) return document.layers[objectId];
// and the following code to call the above function
myField = findDOM(myObject, 0);
myFieldStyle = findDOM(myObject, 1);

So there we have it, by incorporating these two pieces of JavaScript into our page, we can now set up references to the various objects on our page that allows interaction with those objects regardless of which DOM the visitor's browser supports.

One final note. The various browsers support the DOMs to greater or lesser degrees and just because a given browser supports a given DOM does not mean that the browser supports all of the features of that DOM. As an example of this, the Opera 5 browser does not support changing the display attribute to enable you to make objects such as sub-menus appear and disappear. The above routines allow you to design interactivity for your page that will hopefully work across all browsers that support dynamic web pages but you will still need to test your code using each different browser (or at least the more common ones such as IE, netscape, and Opera) in order to make sure that your specific code functions as expected on each of these browsers.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow