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!

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

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