Why don’t we just use element IDs as identifiers in JavaScript?

by

Anyway, this method seems to be quite poorly documented, and In fact, the sources I come across don’t even give it a mention […]

Reliance on implicitly-declared global variables aside, the lack of documentation is a great reason not to use it.

The apparent promotion of id values into global variables isn’t standards compliant (the HTML5 spec for the ID attribute doesn’t mention it) and, therefore, you shouldn’t assume future browsers will implement it.

EDIT: It turns out this behaviour is standards compliant – In HTML5, window should support property access to “Named Elements”:

Named objects with the name name, for the purposes of the above algorithm, are those that are either:

  • child browsing contexts of the active document whose name is name,
  • a, applet, area, embed, form, frameset, img, or object elements that have
    a name content attribute whose value is name, or
  • HTML elements that have an id content attribute whose value is name.

Source: HTML 5 spec, ‘Named access on window object”, emphasis mine.

Based on this, standards compliance is not a reason to avoid this pattern. However, the spec itself advises against its use:

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() or document.querySelector().

More Related Contents:

  1. Do DOM tree elements with IDs become global properties?
  2. How to use getElementsByClassName in javascript-function? [duplicate]
  3. getElementById returning value only for first element [closed]
  4. It says that TypeError: document.getElementById(…) is null [duplicate]
  5. How can I tell if a DOM element is visible in the current viewport?
  6. For loop for HTMLCollection elements
  7. jQuery document.createElement equivalent?
  8. Browser detection versus feature detection
  9. How to get element by class name? [duplicate]
  10. “innerHTML += …” vs “appendChild(txtNode)”
  11. Retrieving the text of the selected in element
  12. Replace HTML page with contents retrieved via AJAX
  13. How can I highlight the text of the DOM Range object?
  14. JavaScript accessing inner DOM of SVG
  15. How to get the HTML for a DOM element in javascript
  16. JavaScript DOMParser access innerHTML and other properties
  17. How to find a parent with a known class in jQuery?
  18. jQuery count child elements
  19. Why aren’t some technically serializable input properties serializable?
  20. How to give a Blob uploaded as FormData a file name?
  21. Do I need to remove event listeners before removing elements?
  22. Add an element to the DOM with JavaScript
  23. Why does document.querySelectorAll return a StaticNodeList rather than a real Array?
  24. cloning javascript event object
  25. What is the difference between Document and document in JavaScript?
  26. Mulitple Elements with the same ID
  27. Retrieving value from with multiple option in React
  28. JavaScript: get the current executing node? [duplicate]
  29. How do I find the DOM node that is at a given (X,Y) position? (Hit test)
  30. Why is iframe.contentWindow == null?

Leave a Comment