具有ID的DOM树元素是否会成为全局属性?
在构思简单的HTMLElement
包装器时,我偶然发现了Internet Explorer和Chrome的以下内容:
id
的给定HTMLElement
,可以使用其ID作为变量名或作为window
的属性来检索<div>
。因此,对于<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
的真实属性冲突。
window
对象的属性添加,从而使情况变得更糟。这更加糟糕,因为现在您必须避免根据您(或项目中的任何其他库代码)可能希望使用的document
或window
对象的任何成员来命名元素。
这还意味着这些元素作为类似全局的变量可见。幸运的是,在这种情况下,代码中的任何实际全局var
或function
声明都会将它们隐藏起来,因此您不必太担心在这里命名的问题,但是如果您尝试对名称冲突的全局变量进行赋值,而忘记声明它var
,则在IE中会出现错误,因为它试图将值赋给元素本身。
var
以及依赖命名元素在window
上可见或作为全局变量是不好的做法。坚持document.getElementById
,它得到了更广泛的支持,也更不含糊。如果您不喜欢键入,可以用较短的名称编写一个简单的包装函数。无论哪种方式,使用id到元素查找缓存都没有意义,因为浏览器通常会优化getElementById
调用以使用快速查找;当元素更改id
或从文档中添加/删除时,您得到的只是问题。
Opera复制了IE,然后WebKit加入了进来,现在,以前将命名元素放在document
属性上的不标准化做法,以及以前只有IE才会把它们放到window
上的做法,都是HTML5的beingstandardised,它的方法是记录和标准化浏览器作者强加给我们的每一种可怕的做法,使它们永远成为网络的一部分。因此,Firefox 4也将支持此功能。
什么是"命名元素"?任何带有id
的内容,以及任何带有name
用于"标识"目的的内容:即表单、图像、锚点和其他一些内容,但不是name
属性的其他不相关实例,如表单输入字段中的控件名称、<param>
中的参数名称或<meta>
中的元数据类型。"识别"name
应避免使用id
。
相关文章