See More About:

Learn Javascript

Cross Browser DOM

Join the Discussion

Questions? Comments?

Related Terms

Object Method

Introduction

So at this point we have looked at three completely different Document Object Models. The problem used to be that we didn't know which browser that each of our visitors will be using (unless we write our pages for a company intranet) however since just about no one uses Internet Explorer 4 any more and the number of Netscape 4 users is also now fairly minor we can effectively ignore the proprietary DOMs and just use the standard W3C DOM.

If you do still have a significant number of Netscape 4 visitors you may prefer to combine the DOMs together so as to create code that will work regardless of which of the DOMs is supported by their browser.

Which DOM is Supported?

It is relatively easy to combine the DOMs together and create our own "overlay" that will allow us to insert DOM references into our code that will work regardless of which of the DOMs that the web browser supports (as long as it supports one of them).

The first step is to work out which of them is supported. Since the standard DOM is supported by more browsers and allows the maximum functionality, we'll test for that one first. The following code will set up four variables indicating whether any DOM is supported and if so which one:

var aDOM = 0;
// var ieDOM = 0;
var nsDOM = 0
var stdDOM = document.getElementById;
if (stdDOM) aDOM = 1; else {
// ieDOM = document.all;
// if (ieDOM) aDOM = 1; else {
var nsDOM = (
(navigator.appName.indexOf('Netscape') != -1)
&& (parseInt(navigator.appVersion) ==4));
if (nsDOM) aDOM = 1;
// }
}

Once this code has been executed aDOM will be set to 1 provided that the browser supports one of the DOMs and one of the other fields stdDOM or nsDOM will be set as well. The commented code is not required any more but would have been used if we wanted to support Internet Explorer 4 which no one uses any more.

Cross Browser DOM

Now all we need to do is to create a function that we can call that will provide us with access to a specified object in whichever DOM is supported. Since the different DOMs are slightly different in the way that they provide access to the style properties of the object, we'll pass a second parameter to our function to indicate whether we want to reference the normal properties and methods or those relating to the object styles. The code to perform this access for us is as follows:

function xDOM(objectId, wS) {
if (stdDOM) return wS ?
document.getElementById(objectId).style:
document.getElementById(objectId);
// if (ieDOM) return wS ? document.all[objectId].style:
// document.all[objectId];
if (nsDOM) return document.layers[objectId];
}

Calling the Cross Browser DOM

Now all that remains is to call our new cross browser DOM to allow us to access the objects on our page. We can reference the objects on our page as follows to reference the ordinary properties and methods (assuming we have labelled the object 'myobj'):

var obj = xDOM(myobj,0);
var myval = obj.value;

The only change we need to make to reference the style properties is to replace the 0 with a 1.

var objS = xDOM(myobj,1);
var mytop = objS.top;

Using What You Know

If your site gets too few visitors still using Netscape 4 then there is no longer any need to provide cross browser DOM support and you can go with just using the standard DOM.

If you see references to document.all in any script that is not coded to provide cross browser DOM support specifically for IE4 as the commented code in the above script shows then you know that the script is out of date and to look for a better one that supports the standard DOM properly instead. Many of the scripts on this site are based on code that I first wrote back when IE4 was still in use and therefore you may find the code in the cross browser DOM function in those scripts to still provide support for this deceased browser. You can delete that code from those scripts if you like.