JS Quirk: Element IDs are global variables!
Here's an interesting quirk I recently discovered:
Any HTML element containing an id creates a global variable of the same name.
Let's start with our HTML:
<html> <head></head> <body> <h1 id="title">Hello World</h1> </body> </html>
This is what we'll see in the console when we reference
There's some interesting behavior with this though. You can overwrite this variable as you'd expect:
But let's say we deleted our
<h1> element and added another with the same id. Would this overwrite the global variable again?
It does not! 😮
That's probably a good thing since this would probably cause many a confused developer!
Although I couldn't locate the documentation for this quirk in the DOM specification, this behavior appears consistent across Chrome, Firefox, Edge, and Safari. Interesting!