javascript - 具有ID的DOM树元素是否会成为全局变量？

Question

在研究一个简单的HTMLElement包装器的想法时，我偶然发现了Internet Explorer和Chrome的以下内容:

对于DOM树中具有ID的给定HTMLElement，可以使用其ID作为变量名称来检索div。所以对于像

<div id="example">some text</div>

在 Internet Explorer 8和Chrome中，您可以执行以下操作:

alert(example.innerHTML); //=> 'some text'

要么

alert(window['example'].innerHTML); //=> 'some text'

那么，这是否意味着DOM树中的每个元素都将转换为全局 namespace 中的变量？并且这是否也意味着可以用它代替这些浏览器中的 getElementById方法？

Answer 1

应该发生的是，已添加“命名元素”作为document对象的明显属性。这是一个非常糟糕的主意，因为它允许元素名称与document的实际属性发生冲突。

IE也通过添加命名元素作为window对象的属性来使情况变得更糟。这是双重不利的，因为现在您必须避免在您想要使用的document或window对象(或项目中的任何其他库代码)的任何成员之后命名您的元素。

这也意味着这些元素作为全局变量可见。幸运的是，在这种情况下，代码中任何真实的全局var或function声明都会使它们模糊，因此您不必担心此处的命名，但是如果您尝试对名称冲突的全局变量进行赋值，则您会忘记将其声明为var，则在IE中会出现错误，因为它试图将值分配给元素本身。

通常，忽略var以及依赖于在window上可见或作为全局变量可见的命名元素被认为是不好的做法。坚持使用document.getElementById，它得到了更广泛的支持并且不那么模棱两可。如果您不喜欢键入，则可以使用短名称编写平凡的包装函数。无论哪种方式，使用id到元素的查找缓存都是没有意义的，因为浏览器通常会优化getElementById调用以使用快速查找。当元素更改id或从文档中添加/删除元素时，您得到的只是问题。

Opera复制了IE，然后加入了WebKit，现在，HTML5的being standardised都是以前不规范的将命名元素放在document属性上的做法，以及以前仅限IE的将它们放在window上的做法，其方法是记录和规范浏览器作者对我们造成的所有可怕行为，使它们永远成为网络的一部分。因此，Firefox 4也将支持此功能。

什么是“命名元素”？任何带有id的东西，以及带有name的任何东西都用于“识别”目的:即表单，图像， anchor 和其他一些东西，但没有其他name属性的无关实例，例如表单输入字段中的控件名称， <param>中的参数名称或<meta>中的元数据类型。应该避免使用“识别” name，而应使用id。