Cross Browser DOM Script

If you are creating your own dynamic HTML scripts then you will need to work out which document object model a given browser supports if your script is to function in that browser. All version 5+ browsers support the standard DOM but there may still sufficient visitors still using Netscape 4 to make it worth supporting that DOM as well. This code does that for you and also provides a function that you can call that will allow your script to work with whichever of the DOMs that the browser supports.

The code to support the Internet Explorer 4 DOM is commented out in the code as statistics I have seen suggest that no one uses that browserr any more. If your statistics show differently then uncomment the code, otherwise you can delete the /* */ commented code.

// Cross Browser DOM // copyright Stephen Chapman, 4th Jan 2005 // you may copy this code but please keep the copyright notice as well var aDOM = 0, ieDOM = 0, 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;}} 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]; }

This code should be incorporated into a script in the head section of your page.

Once we have incorporated this code into our script we can then reference the objects on our page as follows. To reference the ordinary properties and methods (assuming we have labelled the object 'myobj'):

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

For more information see the Cross Browser DOM tutorial.