Did you know that DOM elements with IDs are accessible in JavaScript as global variables? It’s one of those things that’s been around, like, forever but I’m really digging into it for the first time.
If this is the first time you’re hearing about it, brace yourself! We can see it in action simply by adding an ID to an element in HTML:
<div id="cool"></div>
Normally, we’d define a new variable using querySelector("#cool")
or getElementById("cool")
to select that element:
var el = querySelector("#cool");
But we actually already have access to #cool
without that rigamorale:
So, any id
— or name
attribute, for that matter — in the HTML can be accessed in JavaScript using window[ELEMENT_ID]
. Again, this isn’t exactly “new” but it’s really uncommon to see.
As you may guess, accessing the global scope with named references isn’t the greatest idea. Some folks have come to call this the “global scope polluter.” We’ll get into why that is, but first…
This approach is outlined in the HTML specification, where it’s described as “named access on the Window
object.”
Internet Explorer was the first to implement the feature. All other browsers added it as well. Gecko was the only browser at the time to not support it directly in standards mode, opting instead to make it an experimental feature. There was hesitation to implement it at all, but it moved ahead in the name of browser compatibility (Gecko even tried to convince WebKit to move it out of standards mode) and eventually made it to standards mode in Firefox 14.
One thing that might not be well known is that browsers had to put in place a few precautionary measures — with varying degrees of success — to ensure generated globals don’t break the webpage. One such measure is…
Probably the most interesting part of this feature is that named element references don’t shadow existing global variables. So, if a DOM element has an id
that is already defined as a global, it won’t override the existing one. For example:
<head>
<script>
window.foo = "bar";
</script>
</head>
<body>
<div id="foo">I won't override window.foo</div>
<script>
console.log(window.foo); // Prints "bar"
</script>
</body>
And the opposite is true as well:
<div id="foo">I will be overridden :(</div>
<script>
window.foo = "bar";
console.log(window.foo); // Prints "bar"
</script>
This behavior is essential because it nullifies dangerous overrides such as <div id="alert" />
, which would otherwise create a conflict by invalidating the alert
API. This safeguarding technique may very well be the why you — if you’re like me — are learning about this for the first time.
Earlier, I said that using global named elements as references might not be the greatest idea. There are lots of reasons for that, which TJ VanToll has covered nicely over at his blog and I will summarize here:
id
— e.g. <a id="cool">
— but some browsers (namely Safari and Firefox) return a ReferenceError
in the console.<div class="cool">
— the browser should return an HTMLCollection
with an array of the instances. Firefox, however, only returns the first instance. Then again, the spec says we ought to use one instance of an id
in an element’s tree anyway. But doing so won’t stop a page from working or anything like that.Let’s say we chuck the criticisms against using named globals and use them anyway. It’s all good. But there are some things you might want to consider as you do.
As edge-case-y as it may sound, these types of global checks are a typical setup requirement for polyfills. Check out the following example where we set a cookie using the new CookieStore
API, polyfilling it on browsers that don’t support it yet:
<body>
<img id="cookieStore"></img>
<script>
// Polyfill the CookieStore API if not yet implemented.
// https://developer.mozilla.org/en-US/docs/Web/API/CookieStore
if (!window.cookieStore) {
window.cookieStore = myCookieStorePolyfill;
}
cookieStore.set("foo", "bar");
</script>
</body>
This code works perfectly fine in Chrome, but throws the following error in Safari.:
TypeError: cookieStore.set is not a function
Safari lacks support for the CookieStore
API as of this writing. As a result, the polyfill is not applied because the img
element ID creates a global variable that clashes with the cookieStore
global.
We can flip the situation and find yet another issue where updates to the browser’s JavaScript engine can break a named element’s global references.
For example:
<body>
<input id="BarcodeDetector"></input>
<script>
window.BarcodeDetector.focus();
</script>
</body>
That script grabs a reference to the input element and invokes focus()
on it. It works correctly. Still, we don’t know how long it will continue to work.
You see, the global variable we’re using to reference the input element will stop working as soon as browsers start supporting the BarcodeDetector
API. At that point, the window.BarcodeDetector
global will no longer be a reference to the input element and .focus()
will throw a “window.BarcodeDetector.focus
is not a function” error.
Want to hear something funny? To add insult to the injury, named elements are accessible as global variables only if the names contain nothing but letter. Browsers won’t create a global reference for an element with a ID that contains special characters and numbers, like hello-world
and item1
.
Let’s sum up how we got here:
id
(or, in some cases, a name
attribute).querySelector
or getElementById
instead.id
attribute unless you really need it.At the end of the day, it’s probably a good idea to avoid using named globals in JavaScript. I quoted the spec earlier about how it leads to “brittle” code, but here’s the full text to drive the point home:
As a general rule, relying on this will lead to brittle code. Which IDs end up mapping to this API can vary over time, as new features are added to the web platform, for example. Instead of this, use
document.getElementById()
ordocument.querySelector()
.
I think the fact that the HTML spec itself recommends to staying away from this feature speaks for itself.
Named Element IDs Can Be Referenced as JavaScript Globals originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.
This is the 3rd post in a small series we are doing on form accessibility.…
This is going to be the 2nd post in a small series we are doing…
Hey all you wonderful developers out there! In this post we are going to explore…
Hey all you wonderful developers out there! In this post, I am going to take…
These things called passkeys sure are making the rounds these days. They were a main attraction at W3C…
I spend a lot of time in DevTools, and I’m sure you do too. Sometimes…