3

This is a piece of js code that dates back to Netscape Navigator days. I can't figure out or find the reason why this person did it this way. 

function id(i)
{   

   var e;
   if (document.getElementById)
     return document.getElementById(i);
   else if (document.all)
     return document.all[i];
   else if (document.layers)
     return document.layers[i];  

   return null;
}

In newer browsers, if(document.getElementById) is always going to be true. It looks like it's checking to see if that function is there, but I'm not really sure.

The reason I'm asking, is becuase this code reads the name (not id) of elements that shouldn't have the name attribute from browsers IE8 and below. I'm tasked with trying to get it working more effectively on newer browsers. But first, I really need to understand the meaning of this code.

This reading of the name from attributes such as a <tr> is done else where and it was a pretty simple fix of using it as a custom attribute. This piece I included touches many more pieces and isn't as straightforward.

Blanky
  • 251
  • 1
  • 3
  • 15
  • 2
    *"It looks like it's checking to see if that function is there, but I'm not really sure."* Bingo – Kevin B Mar 25 '14 at 15:17
  • 1
    It's about 5 years since I last did JavaScript, but yes, I remember having problems with older browsers and `document.getElementById`. I think he just tries to make it work on older browsers. – Axel Mar 25 '14 at 15:17
  • 2
    someone explained document.all over here - http://stackoverflow.com/questions/2408424/document-all-vs-document-getelementbyid – mmeasor Mar 25 '14 at 15:18
  • 1
    It's covering the netscape navigator, etc. ways of getElementById. Different browsers used to implement this object differently. I don't think this is relevant anymore, getElementById should work fine. – Liam Mar 25 '14 at 15:19
  • 1
    As Axel states this is a check. JavaScript support varied widely amongst browsers. This meant that users had to do a lot of checks for things before they could move on with the code. Basically, that code checks that there is support for the `getElementById()` selector. If it is not found then it checks that `document.all` is supported. Finally it checks support for `document.layers`. This is something that dates way back before the first JavaScript libraries showed up. Such memories. – SparoHawk Mar 25 '14 at 15:19
  • Ah the memories indeed(@SparoHawk) , chirst, I'd never go back! – Liam Mar 25 '14 at 15:21
  • 1
    @Liam Certinaly not! Thankfully most browsers have adopted almost the full DOM standards (some are still around the 70%). ;) – SparoHawk Mar 25 '14 at 15:25

1 Answers1

5

It's a form of feature detection for getElementById - pretty much:

function id(i)
{   

   var e;
   if (document.getElementById) // the standard way
     return document.getElementById(i);
   else if (document.all) // old IE model, needed for very old IE versions
     return document.all[i];
   else if (document.layers) // old netscape model, Netscape 4 etc.
     return document.layers[i];  

   return null;
}

Unless you're supporting IE < 5.5 or Netsape < 6 , both of which you shouldn't support in all honesty - you should avoid this form of feature detection today.

This sort of code is quite common today in order to perform feature detection. I'd like to emphasize the fact that that code was best practice when it was written but is useless today. For example, today you have things like:

if ( !window.requestAnimationFrame ) {
    window.requestAnimationFrame = ( function() {
        return window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        function(callback,element) {
            window.setTimeout( callback, 1000 / 60 );
        };
} )();
}

Performing the exact same thing, only for newer APIs.

Benjamin Gruenbaum
  • 270,886
  • 87
  • 504
  • 504