为什么不需要 document.getElementById？ [复制]答案

【问题标题】：Why is document.getElementById not needed? [duplicate]为什么不需要 document.getElementById？ [复制]
【发布时间】：2014-11-13 22:10:39
【问题描述】：

1) 问题 1

以下示例在不使用“document.getElementById('myId')”的情况下工作。为什么会这样，可以跳过“document.getElementById('myId')”吗？

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Javascript question</title>

<script>
window.onload = function(){
    myId.style.color = 'red';
}
</script>

</head>
<body>

<div id=myId>
<p>Make this color red.</p>
</div>

</body>
</html>

2) 问题 2

我通常存储浏览器对象以减少 DOM 遍历（参见下面的示例）。如果我不将 ID 存储在变量中或者它已经是一个变量，会不会是更多的 DOM 遍历？

window.onload = function(){

var myId = document.getElementById('myId'); /* stored ID that will be used multiple times */

myId.style.color = 'red';
}

谢谢！

【问题讨论】：

jsfiddle: jsfiddle.net/feeela/2zr5Lgfo
当网页中需要大量此类元素时，存储所有内容可能不是一个好主意。

标签： javascript variables

【解决方案1】：

以下示例在不使用“document.getElementById('myId')”的情况下工作。为什么会这样，可以跳过“document.getElementById('myId')”吗？

因为浏览器将对所有带有ids 的元素的引用转储到全局命名空间中，使用id 作为变量名。（技术上，作为全局对象上的 property 名称；全局对象的属性是全局变量。）我强烈建议不要依赖它并使用document.getElementById（或类似）代替。全局命名空间真的很拥挤，还有很多其他的东西可能会发生冲突。

例如，如果你有

<div id="foo">...</div>

和

function foo() {
}

那么在你的代码中使用foo会给你函数，而不是元素。

如果你有类似的情况

<input type="text" id="name">

...并在您的代码中使用name，您将获得窗口的名称（字符串），而不是id="name" 字段的HTMLInputElement。

§5.2.4 of the HTML5 spec 涵盖了将对元素的引用转储到全局命名空间中的业务，在这种情况下，它主要记录了浏览器长期以来所做的事情。

如果我不将 ID 存储在变量中或者它已经是一个变量，会不会是更多的 DOM 遍历？

上面已经是一个全局变量，所以没有额外的 DOM 遍历。在深度嵌套的函数中，可能会有更多的作用域链遍历，但这不太可能是一个主要问题。

但同样，我强烈建议不要依赖自动元素全局变量。相反，将您的代码包装在一个作用域函数中（如您所示），并根据需要使用getElementById、querySelector、querySelectorAll 等来故意获取元素。如果您依赖自动全局变量，最终您可能会被冲突所困扰。但这是意见。

请注意，使用 getElementById 查找元素非常快，因此出于性能原因通常不需要缓存引用（您可能希望这样做以用于其他原因，比如编码方便）。使用选择器（querySelector，querySelectorAll）查找事情有点慢，但我会说当/如果有问题时担心它。 :-)

【讨论】：

我对如何编写 ID 和函数有一个特殊的模式。就我而言，不会有冲突。此外，我永远不会与其他程序员分享我的代码。如果所有现代浏览器都支持该技术并且他们计划继续这样做，我认为没有理由不尝试它。但是，非常感谢您的回答！
几周前我偶然发现了这项技术，并一直在使用它。它适用于所有浏览器，包括移动浏览器。