Script Comparison - Falling Snow

Accessing The DOM

JavaScript has changed significantly over the years and what was considered to be good coding practice back in 2000 and in fact what code you might have had to use back then in order for your script to even work may be significantly different from the code you ought to be using now. It is easy to say that particular code is good while other code is bad but without actually considering why the code might have been coded the way it was when it was first written and looking at how modern browsers work differently it is not necessarily obvious as to what code in an old script should be replaced and what you need to replace it with. To assist in working out how you might go about rewriting an old script to follow modern practice, we can look at scripts written to perform the same task that follow the accepted coding styles of the different times so as to consider why something that used to be needed in a script may no longer be necessary and how we can update the script to follow a more modern style of coding.

Back in 2004 when I wrote the first version of the falling Snow script, the standard DOM had just been finalised and was only supported by the latest version of Internet Explorer - IE5. The other two browsers in popular use at the time - Internet Explorer 4 and Netscape 4 - both had their own proprietary Document Object Models that they supported.

To get around the problem of the three most popular browsers at the time each supporting a different document object model we needed to include some code into the script that would test which of the document object models that the particular browser being used supported so as to use that when we needed to access the page content. While IE5 (and even the latest version of Internet Explorer) support the same DOM that IE4 did, we included all three in order to support the other browsers that were expected to (and did) follow that only support the standard DOM.

The following piece of code was incorporated into the 2004 version of my falling snow script (and most of the other scripts I wrote at that time) to handle this multiple DOM issue.

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 findDOM(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];
}

As all the popular modern browsers now support the standard DOM, we no longer need to consider the document.all and document.layers versions of the Document Object Model in writing our scripts. Any code that checks for either of those two DOMs in our scripts can therefore be safely deleted.

Of course having deleted that code (or its equivalent in whatever old script you are trying to update) we also need to recode all of the references to the findDOM function to simply call the standard DOM instead.In my original falling snow script there is only one call to this function that we need to replace.

objstyle = findDOM('snow'+i,1);

We simply replace that one statement with a direct call to the standard DOM using document.getElementById in order to update our script.

objstyle = document.getElementById('snow' + i).style;

While this particular script doesn't call findDOM with a 0 as the second parameter, the only difference needed in replacing the code where the call does have a zero there is to simply leave the .style off of the end of the call.

The new version of my "Falling Snow" script contains a number of additional calls to update the web page via the standard Document Object Model, however these are replacing other outdated code in the original script that was not done in that script with references to the Document Object Model.

Next: Accessing The BOM.

 

This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow
Donate