为啥不需要 document.getElementById？ [复制]
Posted
技术标签:
【中文标题】为啥不需要 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 当网页中需要大量此类元素时，存储所有内容可能不是一个好主意。 【参考方案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 和函数有一个特殊的模式。就我而言，不会有冲突。此外，我永远不会与其他程序员分享我的代码。如果所有现代浏览器都支持该技术并且他们计划继续这样做，我认为没有理由不尝试它。但是，非常感谢您的回答！ 几周前我偶然发现了这项技术，并一直在使用它。它适用于所有浏览器，包括移动浏览器。以上是关于为啥不需要 document.getElementById？ [复制]的主要内容，如果未能解决你的问题，请参考以下文章