在研究一个简单的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树中的每个元素都将 转换为全局名称空间中的变量?并且这是否也意味着可以用它代替getElementById这些浏览器中的方法?
getElementById
应该发生的是添加了“命名元素”作为document对象的明显属性。这是一个非常糟糕的主意,因为它允许元素名称与的实际属性冲突document。
document
IE也通过添加命名元素作为window对象的属性来使情况变得更糟。这是双重不利的,因为现在您必须避免在您可能想要使用document或window对象(或项目中的任何其他库代码)的任何成员之后命名元素。
window
这也意味着这些元素作为全局变量可见。幸运的是,在这种情况下,代码中的任何实际全局变量var或function声明都将它们隐藏起来,因此您不必担心在此处命名,但是如果您尝试对名称冲突的全局变量进行赋值而忘记声明它var,您将在IE中遇到错误,因为它试图将值分配给元素本身。
var
function
通常,忽略var以及依赖命名元素在window全局变量上或全局变量上可见是不正确的做法。坚持document.getElementById,这是得到更广泛支持和较少含糊的内容。如果您不喜欢键入,则可以使用短名称编写平凡的包装函数。无论哪种方式,使用id到元素的查找缓存都是没有意义的,因为浏览器通常会优化getElementById调用以使用快速查找。当元素更改id或从文档中添加/删除元素时,您得到的只是问题。
document.getElementById
id
歌剧复制IE,然后WebKit的加入进来,现在都将命名元素上的以前不标准,实践document特性,并把他们的先前IE- 只有实践window都被 标准化的HTML5,其方法是将文件和规范每浏览器作者对我们施加了可怕的习俗,使他们永远成为网络的一部分。因此,Firefox 4也将支持此功能。
什么是“命名元素”?带有id,和带有name用于“标识”目的的任何东西:即表单,图像,锚点和其他一些name属性,但没有其他与属性无关的实例,例如表单输入字段中的控件名称,<param>或中的元数据类型<meta>。name应该避免使用“标识” 来代替id。
name
<param>
<meta>