JavaScripting Netscape 6: No More Sloppy Code | 4

[previous] [next]

DOM Tips and Tricks

Browser Sniffing

One new test you can use for DOM-compliance is the document.getElementById test, as follows:

N   = (document.layers) ? true:false;                 // netscape 4
I   = (document.all) ? true:false;                    // ie4+
DOM = ((document.getElementById)&&(!I))?true:false;   // ns6 etc.

There are a number of variations on this theme, but you get the idea. Future versions of this branching logic might add IE5.5+ to the DOM mix with appropriate code.

Creating Elements

Once you've got the branching logic down you would typically create and apply style to your DHTML element by using static HTML and a style sheet or by building up a positioned DIV string dynamically and by using createContextualFragment to append it to the body element, as follows:

function makeDOM(){   
    var text='<DIV ID="bnr" STYLE="position:absolute;overflow:hidden;top:'+bnrTop+'px;';
    text   +='left:+bnrLft+'px;width:'+bnrWid+'px;height:'+bnrHit+'px">';    
    text+='<\/DIV>';
    msgWid=bnrWid-leftPadding;
    var r = document.body.ownerDocument.createRange();
    r.setStartBefore(document.body);
    var df = r.createContextualFragment(text);
}

A better way is to create a new DIV using the DOM in NS6, as follows:

function makeDOM(){
    var elmParentDiv;
    elmParentDiv = document.createElement('div');
    elmParentDiv.id = 'bnr';
    elmParentDiv.style.position = 'absolute';
    elmParentDiv.style.overflow = 'hidden';
    elmParentDiv.style.top = bnrTop + 'px';
    elmParentDiv.style.left = bnrLft + 'px';
    elmParentDiv.style.width = bnrWid + 'px';
    elmParentDiv.style.height = bnrHit + 'px';
    document.body.appendChild(elmParentDiv);
}

Thankfully the Mozilla crew decided to include IE5's proprietary innerHTML method (not in the W3C's DOM but very useful as a shortcut). Instead of the above you can do something like:

function makeDOM() {
    var text='<DIV ID="bnr" STYLE="position:absolute;overflow:hidden;top:'+bnrTop+'px;';
    text   +='left:+bnrLft+'px;width:';+bnrWid+'px;height:'+bnrHit+'px">';
    text+='<\/DIV>';
    msgWid=bnrWid-leftPadding;
    document.getElementById('IEfad1').innerHTML  = text;
}

Referencing Elements

Once you've created a positioned element you would typically grab it with a getElementById then move or replace it. However, you should always use intermediate variables to hold the result of a getElementById since it may cause a large performance hit, especially for more complex scripts. For example,

Instead of:

if (DOM) {
    document.getElementById('IEfad1').innerHTML  = TopnewsStr;
    document.getElementById('IEfad1').style.top  = '10px';
    document.getElementById('IEfad1').style.left = '10px';
}

Do this:

if (DOM) {
    var elm = document.getElementById('IEfad1');
    elm.innerHTML = TopnewsStr;
    elm.style.top = '10px';
    elm.style.left = '10px';
}

Getting into the habit of saving references to objects rather than looking them up each time is a Good Thing (tm).

Now that you can manipulate positioned elements you would typically encapsulate your code in external files. This is where things get a bit strange. What we found is that newer browsers like NS6 and IE5.5 act differently when you use external JavaScript source files that are dynamically written. The next section will show this new behavior and some workarounds.

[previous] [next]