带有id的DOM树元素是否成为全局变量？

Question

带有id的DOM树元素是否成为全局变量？研究一个简单的HTMLElement包装器的想法我偶然发现了Internet Explorer和Chrome的以下内容：对于DOM树中具有ID的给定HTMLElement，可以使用其ID作为变量名来检索div。所以对于一个喜欢的div<div id="example">some text</div>在Internet Explorer 8和Chrome中，您可以执行以下操作：alert(example.innerHTML); //=> 'some text'要么alert(window['example'].innerHTML); //=> 'some text'那么，这是否意味着DOM树中的每个元素都转换为全局命名空间中的变量？它是否也意味着可以使用它作为getElementById这些浏览器中方法的替代品？

Answer 1

如前面的答案所述，此行为称为窗口对象上的命名访问。该值name的某些元素属性和值id的所有元素的属性都可用作为全球性质window的对象。这些被称为命名元素。由于window是浏览器中的全局对象，因此每个命名元素都可以作为全局变量访问。

这最初是由Internet Explorer添加的，最终由所有其他浏览器实现，仅仅是为了与依赖于此行为的站点兼容。有趣的是，Gecko（Firefox的渲染引擎）选择仅以怪癖模式实现此功能，而其他渲染引擎则以标准模式启用它。

然而，像Firefox 14，火狐现在支持命名访问上window的标准模式对象也是如此。他们为什么改变这个？事实证明，仍有很多网站在标准模式下依赖此功能。微软甚至发布了一个营销演示，阻止了该演示在Firefox中运行。

Webkit最近考虑了相反的做法，window仅将对象的命名访问权限降级为怪癖模式。他们通过与Gecko相同的推理决定反对它。

所以...疯狂，因为看起来这种行为在标准模式下在所有主流浏览器的最新版本中使用现在技术上是安全的。但是虽然命名访问看起来有点方便，但不应该使用它。

为什么？本文总结了很多关于全局变量为什么不好的原因。简而言之，拥有一堆额外的全局变量会导致更多错误。假设您不小心输入了a的名称var并碰巧键入了id一个DOM节点，SURPRISE！

此外，尽管标准化，但浏览器的命名访问实现仍然存在很多差异。

• IE错误地使name表单元素（输入，选择等）可以访问属性的值。

• Gecko和Webkit错误地不会<a>通过其name属性访问标签。

• Gecko错误地处理了多个具有相同名称的命名元素（它返回对单个节点而不是引用数组的引用）。

如果你尝试在边缘情况下使用命名访问，我相信还有更多。

正如其他答案中所提到的那样，document.getElementById用来获取对DOM节点的引用id。如果需要通过其name属性使用来获取对节点的引用document.querySelectorAll。

请不要在您的站点中使用命名访问来传播此问题。如此多的网络开发人员浪费时间试图追踪这种神奇的行为。我们确实需要采取行动并让渲染引擎在标准模式下关闭命名访问。从短期来看，它会破坏一些做坏事的网站，但从长远来看，这将有助于推动网络向前发展。

如果您有兴趣，我可以在我的博客上更详细地讨论这个问题 - https://www.tjvantoll.com/2012/07/19/dom-element-references-as-global-variables/。

Answer 2

getElementById()在这些情况下你应该坚持，例如：

document.getElementById('example').innerHTML

IE喜欢在全局命名空间中混合使用元素name 和 ID属性，因此最好明确指出你想要获得的内容。