javascript - 具有 ID 的 DOM 树元素会成为全局属性吗？

Question

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

对于给定的HTMLElement与 id在 DOM 树中，可以检索 <div>使用其 ID 作为变量名或 window 的属性。所以对于<div>喜欢

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

在 Internet Explorer 8和 Chrome 你可以这样做:

alert(example.innerHTML); // Alerts "some text".

或

alert(window["example"].innerHTML); // Alerts "some text".

那么，这是否意味着 DOM 树中的每个元素都会转换为全局对象的属性？这是否也意味着人们可以用它来替代 getElementById这些浏览器中的方法？

Answer 1

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

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

这也意味着这些元素作为类似全局的变量是可见的。幸运的是，在这种情况下任何真正的全局 var或function代码中的声明会隐藏它们，因此您不必在这里太担心命名问题，但是如果您尝试对名称冲突的全局变量进行赋值，而忘记声明它 var ，当 IE 尝试将值分配给元素本身时，您会在 IE 中收到错误。

通常认为省略 var 是不好的做法。 ，以及依赖在 window 上可见的命名元素或作为全局变量。坚持document.getElementById ，得到更广泛的支持并且更明确。如果您不喜欢打字，您可以编写一个名称较短的简单包装函数。不管怎样，使用 id-to-element 查找缓存是没有意义的，因为浏览器通常会优化 getElementById无论如何，调用以使用快速查找；当元素发生变化时，你得到的只是问题 id或从文档中添加/删除。

Opera 复制了 IE，然后 WebKit 加入进来，现在又加入了之前未标准化的将命名元素放在 document 上的做法。属性，以及以前仅适用于 IE 的做法 window是being standardised HTML5 的方法是记录和标准化浏览器作者对我们造成的每一种可怕的做法，使它们永远成为网络的一部分。所以Firefox 4也将支持这一点。

什么是“命名元素”？任何带有 id 的东西，以及任何带有 name 的内容用于“识别”目的:即表格、图像、 anchor 和其他一些内容，但不包括 name 的其他不相关实例属性，如表单输入字段中的控件名称、<param> 中的参数名称或 <meta> 中的元数据类型。 ‘识别’name s 是应该避免的，有利于 id .