My Favorite JavaScript Oddity: document.all

In the dusty annals of the browser are many artifacts from the days before standards bodies and modern JavaScript frameworks.


But by far my favorite bit of “WTF JavaScript!” is document.all.

History

Internet Explorer implemented document.all before document.getElementById existed. It provides several ways to access DOM elements on the page:

// As an array of all elements on the page in
// depth-first order.
document.all[0] // <html>

// As an object with element IDs as keys.
document.all['content'] // <div id="content">

// As a function that returns an element with
// the passed ID.
// Works the same as document.getElementById()
document.all('content') // <div id="content">

Since this was an Internet Explorer-only API, it didn't work in other browsers. However, since Internet Explorer had such market dominance, many web developers neglected to test their code on other browsers:

// Throws if not on IE, but everyone uses IE!
// And they always will!
alert(document.all['username'])

Other browsers wanted these websites to work, so they also implemented document.all.

The Problem

Since initially, document.all only existed in Internet Explorer, developers used its existance for browser detection:

if (document.all) {
  // Internet Explorer specific code
  var activeX = new ActiveXObject("name")
} else {
  // Code for other browsers
}

Although other browsers supported document.all, they didn't support everything that Internet Explorer did. So they needed to support document.all without it triggering the Internet Explorer browser detection.

The Solution

Make document.all falsy!

Boolean(document.all) // false

Now it fails feature detection, but still works if you try to use it anyway.

document.all is an object

document.all is an array

document.all is a function

and document.all is falsy!