Do DOM tree elements with IDs become global properties?

html

responsive-design

best-practices

web-development

byAlex Kataev·Dec 28, 2024

By default, elements bearing an id attribute in HTML automatically become global properties. You can reference an element straightaway as such:

<div id="example"></div>
<script>
  // "Knock! Knock! Who's there?"
  // It's your div 'example' standing globally 
  console.log(example); // <div id="example"></div>
</script>

But here's the rub: This characteristic can cause naming collisions and introduce bugs. For safety and clarity, you're advised to use document.getElementById('example').

Collisions: ID vs. name

Differentiating between id and name attributes can be a bit of a pitfall. At the core, HTML5 standards have clarified that only the id should become a global window property. However, historical behaviors allow name attributes to create references.

Keep the global namespace clean. Go with document.querySelectorAll('[name="value"]') if you need to select elements by the name attribute.

Browser quirks: A mixed bag

Browsers, in their varying flavors, come with their quirks when mapping DOM to global properties. IE, for instance, has a knack for messing up when accessing elements by the name attribute. Stick to standards.

Thanks to browser optimizations, document.getElementById is your flash-like friend. No more tripping over bugs due to global ID referencing!

Global property pitfalls

Letting IDs lounge around as global variables can lead to unforeseen issues:

Unintentionally overwriting window properties
Showdowns between identical id and name attributes leading to bugs
Misfire due to reliance on named access in standards mode

Standards vs. legacy: What to use?

Stick to well-grounded web development

Better adopt standard web practices for reliable code. Use document.getElementById, store element references in scoped variables, and use document.querySelector and document.querySelectorAll for non-ID selectors.

Learn from the past

Historically, old browsers allowed names and IDs to be used interchangeably. Web development, however, has evolved. getElementById shot to fame as it brought precision and predictability to the game.

Moving with the future

Modern browsers support direct ID manipulation. But for the sake of maintainable and future-proof coding, it's better to conform with contemporary standards and practices.

explain-codes / Html / Do DOM tree elements with IDs become global properties?

Linked

Javascript get element by name



Why does JS code "var a = document.querySelector('a[data-a=1]');" cause error?



How to add/update an attribute to an HTML element using JavaScript?



Getting HTML elements by their attribute names



How can I get the data-id attribute?

