javascript变量对应于具有相同ID的DOM元素[重复]答案

【问题标题】：javascript variable corresponds to DOM element with the same ID [duplicate]javascript变量对应于具有相同ID的DOM元素[重复]
【发布时间】：2011-07-27 19:17:49
【问题描述】：

我是 javascript 新手，我只是注意到我在任何地方都没有看到的 javascript 行为。如果我有一个分配了 id 的 DOM 元素，比如“x”，那么在我的 javascript 中，该元素会自动分配给变量 x。我在 chrome 和 safari 中看到了这一点。这是 javascript 的记录功能吗？

例如：

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form id='x'>
<input type='text' name='info' id='info'/>
<input type='submit' name='submit' value='Complete'/>
</form>
<script type='text/javascript'>
  window.onload = function() {
    alert( x==document.getElementById('x') );
    info.value = 'Test me!';
  }
</script>
</body>
</html>

加载后，它会提示 true，并且输入区域会显示“测试我！”。如果这是正确的行为，我们为什么还需要 document.getElementById？

【问题讨论】：

哇！我已经编写 JavaScript 代码年了，但我从来不知道这一点！我实际上找到了这个答案，因为我试图找到一种方法来简化在 JavaScript 中获取对 UI 元素的引用，而不是到处都有冗余......

标签： javascript dom

【解决方案1】：

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
    </head>
    <body>
        <div id="w"></div>

        <script type="text/javascript">

        alert( w );

        w = null;

        alert( w );

        </script>
    </body>
</html>

在 IE8 中试试这个测试。你会发现 w 是全局的，不能被覆盖。更改“var w = null”中的“w = null”并重新加载（清空缓存后）...

IE8 在运行前检查变量并删除全局对应。我真的等不及 Web 开发者不再需要支持 IE8 的那一天了……

提示：不要使用等于 DOM 元素 id 的变量名.. OMG OMG

【讨论】：

【解决方案2】：

此行为记录在the HTML standard (chapter 6.2.4) 中。

该标准定义了“命名元素”，它们是具有name 或id 属性集的HTML 元素。（请注意，name 属性仅在某些类型的 HTML 元素上定义。）

对于每个命名元素，浏览器（环境）定义了一个对应的全局属性。

【讨论】：

根据我的评论，Chrome 和 Firefox 实现了这种行为，但 IE11 没有。我必须承认，直到现在我才知道这个功能。
这就是 window 成为全局变量的目的...

【解决方案3】：

这是一个仅限 IE 的非标准功能。

不要依赖它。

【讨论】：

哦不！可怕的功能！我希望这是一个愚人节玩笑。
这不是非标准的：whatwg.org/specs/web-apps/current-work/multipage/… 查看项目符号：“具有值为 name 的 id 内容属性的 HTML 元素。”
这不是仅限 IE，请使用jsfiddle.net/KooiInc/ghY99在其他浏览器中尝试。
这种行为存在于 IE9、Chrome、Opera 和 Safari 中。只有 Firefox 4 没有实现这一点。见这里：jsfiddle.net/WbwEC
@Marcel 这是真的。幸运的是，无法替换现有的全局属性 - 如果您有这个 <div id="document">，那么 document 仍将指向 document 对象，而不是 DIV。