[javascript] document.all vs. document.getElementById

When should you use document.all vs. document.getElementById?

document.all works in Chrome now (not sure when since), but I've been missing it the last 20 years.... Simply a shorter method name than the clunky document.getElementById. Not sure if it works in Firefox, those guys never had any desire to be compatible with the existing web, always creating new standards instead of embracing the existing web.

document.all() is a non-standard way of accessing DOM elements. It's been deprecated from a few browsers. It gives you access to all sub elements on your document.

document.getElementById() is a standard and fully supported. Each element have a unique id on the document.

If you have:

<div id="testing"></div>

Using

document.getElementById("testing"); 

Will have access to that specific div.

document.all is very old, you don't have to use it anymore.

To quote Nicholas Zakas:

For instance, when the DOM was young, not all browsers supported getElementById(), and so there was a lot of code that looked like this:

if(document.getElementById){  //DOM
    element = document.getElementById(id);
} else if (document.all) {  //IE
    element = document.all[id];
} else if (document.layers){  //Netscape < 6
    element = document.layers[id];
}

document.querySelectorAll (and its document.querySelector() variant that returns the first found element) is much, much more powerful. You can easily:

• get an entire collection with document.querySelectorAll("*"), effectively emulating non-standard document.all property;
• use document.querySelector("#your-id"), effectively emulating document.getElementById() function;
• use document.querySelectorAll(".your-class"), effectively emulating document.getElementsByClassName() function;
• use document.querySelectorAll("form") instead of document.forms, and document.querySelectorAll("a") instead of document.links;
• and perform any much more complex DOM querying (using any available CSS selector) that just cannot be covered with other document builtins.

Unified querying API is the way to go. Even if document.all would be in the standard, it's just inconvenient.

Actually, document.all is only minimally comparable to document.getElementById. You wouldn't use one in place of the other, they don't return the same things.

If you were trying to filter through browser capabilities you could use them as in Marcel Korpel's answer like this:

if(document.getElementById){  //DOM
    element = document.getElementById(id);
} else if (document.all) {    //IE
    element = document.all[id];
} else if (document.layers){  //Netscape < 6
    element = document.layers[id];
}

But, functionally, document.getElementsByTagName('*') is more equivalent to document.all.

For example, if you were actually going to use document.all to examine all the elements on a page, like this:

var j = document.all.length;
for(var i = 0; i < j; i++){
   alert("Page element["+i+"] has tagName:"+document.all(i).tagName);
}

you would use document.getElementsByTagName('*') instead:

var k = document.getElementsByTagName("*");
var j = k.length; 
for (var i = 0; i < j; i++){
    alert("Page element["+i+"] has tagName:"+k[i].tagName); 
}

Specifically, document.all was introduced for IE4 BEFORE document.getElementById had been introduced.

So, the presence of document.all means that the code is intended to support IE4, or is trying to identify the browser as IE4 (though it could have been Opera), or the person who wrote (or copied and pasted) the code wasn't up on the latest.

In the highly unlikely event that you need to support IE4, then, you do need document.all (or a library that handles these ancient IE specs).

According to Microsoft's archived Internet Explorer Dev Center, document.all is deprecated in IE 11 and Edge!