Question

1）问题1

以下示例无需使用＆＃34; document.getElementById（＆＃39; myId＆＃39;）＆＃34;即可运行。为什么这样，可以跳过＆＃34; document.getElementById（＆＃39; myId＆＃39;）＆＃34;？

<!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';
}

谢谢！

Answer 1

以下示例在不使用“document.getElementById（'myId'）”的情况下工作。为什么会跳过“document.getElementById（'myId'）”？

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

例如，如果你有

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

和

function foo() {
}

然后在代码中使用foo将为您提供函数，而不是元素。

同样如果你有

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

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

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

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

根据上述情况，它已经是一个全局变量，所以没有额外的DOM遍历。在一个深度嵌套的函数中，可能会有更多的范围链遍历，但这不太可能是一个主要问题。

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

请注意，使用getElementById查找元素 确实非常快 ，因此出于性能原因通常不需要缓存引用（您可能希望这样做）出于其他原因，比如编码方便）。使用选择器（querySelector，querySelectorAll）查看速度有点慢，但是如果出现问题，我会担心它。： - ）

为什么不需要document.getElementById？

1 个答案: