Are HTML Element IDs Global Properties in JavaScript?

Does the ID Attribute of DOM Tree Elements Make Them Global Properties?

In particular browsers like Internet Explorer and Chrome, HTML elements with an assigned ID can be accessed as variable names or properties of the window object. For instance, a

element with the ID "example" can be retrieved using either example.innerHTML or window["example"].innerHTML.

However, this behavior is not intended and should be considered a potential pitfall. As pointed out in the extensive answer, browsers are adding named elements as properties of the document object (and in IE's case, the window object as well), which is a poor design decision because it allows element names to conflict with existing properties of those objects.

To avoid this issue, it's highly recommended to stick to using document.getElementById for element retrieval. This method is widely supported and provides clarity in your code. If the longer name is a concern, you can create a shorter wrapper function instead of relying on the unintended behavior of ID-to-element lookup.

It's important to note that the practice of making named elements accessible as global-like variables is being formalized in HTML5, including the placement of such elements on both document and window properties. However, despite the standardization, it remains a practice that is best avoided in favor of more robust and unambiguous methods like document.getElementById.

The above is the detailed content of Are HTML Element IDs Global Properties in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!

JavaScript html5 chrome html Object if for using Attribute function dom this innerHTML issue

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn