Your host:
Stephen Chapman

Which DOM to use.

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. (Two now that no one uses IE4 any more)

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 tose 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 (but since the now no longer used IE4 is the only browser that supported it without also supporting the standard DOM this test is no longer required):

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.

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:

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.

Want an example of what you can do with these functions? Take a look at the Extended Tooltip Script which is one of several scripts that you can find on this site that use the above DOM code.

Add to del.icio.us