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 上的做法。属性，以及将它们放在 window 上的以前仅限 IE 的做法是 being standardised HTML5 的方法是记录和标准化浏览器作者对我们施加的每一个可怕的做法，使它们永远成为网络的一部分。所以 Firefox 4 也会支持这个。

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