Fatal编程技术网
  • javascript/
  • Javascript ID为的DOM树元素是否成为全局变量？

Javascript ID为的DOM树元素是否成为全局变量？

javascript dom

Javascript ID为的DOM树元素是否成为全局变量？,javascript,dom,global-variables,getelementbyid,identifier,Javascript,Dom,Global Variables,Getelementbyid,Identifier,在构思一个简单的HtmleElement包装器时，我偶然发现InternetExplorer和： 对于DOM树中ID为的给定HtmleElement，可以使用其ID作为变量名检索div。所以对于一个像 <div id="example">some text</div> 或 那么，这是否意味着DOM树中的每个元素都转换为全局名称空间中的变量？这是否也意味着可以在这些浏览器中使用它来替代getElementById方法？在这些情况下，您应该坚持使用getElementByI

在构思一个简单的HtmleElement包装器时，我偶然发现InternetExplorer和：

对于DOM树中ID为的给定HtmleElement，可以使用其ID作为变量名检索div。所以对于一个像

<div id="example">some text</div>
或

那么，这是否意味着DOM树中的每个元素都转换为全局名称空间中的变量？这是否也意味着可以在这些浏览器中使用它来替代
getElementById
方法？

在这些情况下，您应该坚持使用
getElementById（）
，例如：

document.getElementById('example').innerHTML
IE喜欢在全局命名空间中混合具有
name
和
ID
属性的元素，因此最好明确说明您试图获取的内容。

应该发生的是，“命名元素”被添加为
文档
对象的明显属性。这是一个非常糟糕的主意，因为它允许元素名称与
文档的真实属性冲突

IE还添加了命名元素作为
窗口
对象的属性，使情况变得更糟。更糟糕的是，现在必须避免以
文档
或
窗口
对象（或项目中的任何其他库代码）的任何成员命名元素

这也意味着这些元素作为全局变量可见。幸运的是，在这种情况下，代码中任何真正的全局
var
或
函数
声明都会将它们隐藏起来，因此您不必太担心在这里命名，但是如果您尝试使用冲突名称对全局变量赋值，却忘记了声明
var
，当IE试图将值分配给元素本身时，您将在IE中得到一个错误

通常认为，省略
var
，以及依赖在
窗口中可见或作为全局变量的命名元素是不好的做法。坚持使用
document.getElementById
，它得到了更广泛的支持，并且不那么模棱两可。如果您不喜欢键入，可以用较短的名称编写一个简单的包装函数。无论哪种方式，使用id到元素查找缓存都没有意义，因为浏览器通常会优化
getElementById
调用以使用快速查找；当元素更改
id
或从文档中添加/删除时，您只会遇到问题

Opera复制了IE，然后WebKit加入，现在，以前不规范的将命名元素放在
文档
属性上的做法，以及以前IE唯一将命名元素放在
窗口
上的做法都是通过HTML5实现的，他们的方法是记录和标准化浏览器作者给我们造成的每一个可怕的行为，使他们永远成为网络的一部分。所以Firefox4也支持这一点


什么是“命名元素”？具有
id
的任何内容，以及用于“识别”目的的具有
名称的任何内容：即表单、图像、锚和其他一些内容，但不包括
名称
属性的其他不相关实例，如表单输入字段中的控件名称、
中的参数名称或
中的元数据类型识别“
name
s”是应该避免的行为，而应支持
id
，如前面的回答中所述，这种行为称为。某些元素的
name
属性值和所有元素的
id
属性值作为全局
窗口
对象的属性提供。这些元素称为命名元素。由于
窗口
是浏览器中的全局对象，因此每个命名元素都可以作为全局变量访问

这最初是由Internet Explorer添加的，最终由所有其他浏览器实现，只是为了与依赖于此行为的站点兼容。有趣的是，Gecko（Firefox的渲染引擎）选择仅在中实现此功能，而其他渲染引擎将其保持在标准模式

但是，从Firefox 14开始，在标准模式下的
窗口中也会显示
对象。他们为什么要改变这一点？事实证明，仍然有很多网站在标准模式下依赖此功能。微软甚至做到了这一点，阻止了该演示在Firefox中运行

Webkit最近已将
窗口上的命名访问权限降级为仅限quirks模式。他们以和壁虎一样的理由反对它

所以…疯狂的是，在标准模式下，在所有主要浏览器的最新版本中使用这种行为在技术上是安全的。但是，尽管命名访问看起来有点方便，但不应使用它

为什么?？在这篇文章中可以总结出许多关于原因的推理。简单地说，拥有一堆额外的全局变量会导致更多的bug。假设您意外地键入了一个
var
的名称，并且碰巧键入了一个DOM节点的
id
，令人惊讶

此外，尽管已经标准化，但在浏览器的命名访问实现中仍然存在相当多的差异


    

  • IE错误地使表单元素（输入、选择等）可以访问
    name
    属性的值
    • 

  • Gecko和Webkit不正确地制造
    是的，他们制造了。
    
在Chrome 55、Firefox 50、IE 11、IE Edge 14和Safari 10中测试
    
以下面的例子：
    

    <!DOCTYPE html>
<html>
<head>
</head>
<body>
  <div id="im_not_particularly_happy_with_that">
    Hello World!
  </div>
  <script>
    im_not_particularly_happy_with_that.innerText = 'Hello Internet!';
  </script>
  <!-- Looking at you W3 HTML5 spec group ಠ_ಠ -->
</body>
</html>

    

    
你好，世界！
我对这个并不特别高兴。innerText='Hello Internet！'；

    

    这个问题听起来应该是：“提供ID的HTML标记是否成为全局可访问的DOM元素？”
    
答案是肯定的
    
这就是它的工作原理，也是为什么W3C从一开始就引入IDs的原因
已解析脚本环境中HTML标记的ID

    document.getElementById('example').innerHTML

    

    <!DOCTYPE html>
<html>
<head>
</head>
<body>
  <div id="im_not_particularly_happy_with_that">
    Hello World!
  </div>
  <script>
    im_not_particularly_happy_with_that.innerText = 'Hello Internet!';
  </script>
  <!-- Looking at you W3 HTML5 spec group ಠ_ಠ -->
</body>
</html>