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 中遇到错误，因为它会尝试将值分配给元素本身。

通常认为省略 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 的那些.