DEV Community

JS Bits Bill
JS Bits Bill

Posted on • Edited on

4 1

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>
Enter fullscreen mode Exit fullscreen mode

This is what we'll see in the console when we reference window.title:

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!


Check out more #JSBits at my blog, jsbits-yo.com. Or follow me on Twitter!

AWS GenAI LIVE image

Real challenges. Real solutions. Real talk.

From technical discussions to philosophical debates, AWS and AWS Partners examine the impact and evolution of gen AI.

Learn more

Top comments (0)

Billboard image

Create up to 10 Postgres Databases on Neon's free plan.

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Try Neon for Free →

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay