javascript - 具有 ID 的 DOM 树元素会成为全局属性吗?

标签 javascript html dom global-variables getelementbyid

正在研究一个简单的想法 HTMLElement我偶然发现了以下 Internet Explorer 和 Chrome 的包装器:

对于给定的HTMLElementid在 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您(或项目中的任何其他库代码)可能想要使用的对象。

这也意味着这些元素作为类似全局的变量是可见的。幸运的是,在这种情况下任何真正的全局 varfunction代码中的声明会隐藏它们,因此您不必在这里太担心命名问题,但是如果您尝试对名称冲突的全局变量进行赋值,而忘记声明它 var ,当 IE 尝试将值分配给元素本身时,您会在 IE 中收到错误。

通常认为省略 var 是不好的做法。 ,以及依赖在 window 上可见的命名元素或作为全局变量。坚持document.getElementById ,得到更广泛的支持并且更明确。如果您不喜欢打字,您可以编写一个名称较短的简单包装函数。不管怎样,使用 id-to-element 查找缓存是没有意义的,因为浏览器通常会优化 getElementById无论如何,调用以使用快速查找;当元素发生变化时,你得到的只是问题 id或从文档中添加/删除。

Opera 复制了 IE,然后 WebKit 加入进来,现在又加入了之前未标准化的将命名元素放在 document 上的做法。属性,以及以前仅适用于 IE 的做法 windowbeing standardised HTML5 的方法是记录和标准化浏览器作者对我们造成的每一种可怕的做法,使它们永远成为网络的一部分。所以Firefox 4也将支持这一点。

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

关于javascript - 具有 ID 的 DOM 树元素会成为全局属性吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31096377/

相关文章:

javascript - 如何通过单击元素删除类

javascript - 为什么我的javascript函数无故中途停止

javascript - 带有事件的嵌套元素

javascript - 由于脚本已停止工作,Google 应用程序是否有任何更新?

javascript - 如何在 axios 中设置标题和选项?

javascript - 固定标题的文本框

html - CSS 表单输入[type ="text"] 选择器

php - 如果最后一个字符是 "/",则将其删除

jquery - 如何在 HTML、DOM 中使用 jQuery 检测元标记

javascript - ReactJs - 为什么子事件不会改变父事件的状态?