通过它访问HTML元素's id DIRECTLY-这里发生了什么

Accessing an HTML-element by it's id DIRECTLY - What happens here?

本文关键字：id DIRECTLY- 这里 什么 发生了 访问 HTML 元素      更新时间：2023-09-26

我偶然发现了这种行为：

我可以通过HTML属性"id"访问JavaScript中的HTML元素。通常我使用getElementById。

我甚至可以写访问它的属性。

制作了这个演示并在Firefox、Safari和Chrome中试用。它在任何地方都有效。

alert(test1.innerHTML);
test1.innerHTML = 'Foobar';
alert(test1.innerHTML);
<div id="test1">Demo 123</div>

所以，说实话：我感到惊讶和困惑，因为我还不知道这是可能的。

此外，我问自己：当我可以直接获取和设置元素时，getElementById有什么意义？当然：我知道发明者并没有在没有任何意图的情况下采用这种方法。

有人能解释一下为什么我可以通过id属性访问元素吗？

为什么要使用getElementById？

据我记忆所及，这种行为是由Internet Explorer引入的。过了一段时间，其他供应商把它捡了起来。我认为它从未被标准化，因此可能随时停止运行。此外，如果您的代码中有一个变量test1，它将覆盖控件定义的test1。

值得一提的是，在某些IE版本中，尝试创建与元素id同名的全局变量失败。David Flanagan的《JavaScript:最终指南》一书也指出，如果在创建元素时变量已经存在于全局范围中，那么该变量将不会被具有相同id的元素覆盖。

关于这个主题的更多内容：是否有一个规范要求元素的id成为全局变量？这里：带有id的DOM树元素会成为全局变量吗？

相关文章：