正在研究一个简单的想法 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
这些浏览器中的方法?
最佳答案
应该发生的是“命名元素”被添加为 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
的那些.
关于javascript - 具有 ID 的 DOM 树元素是否成为全局属性?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5331696/