为什么不需要document.getElementById？

以下示例适用，而无需使用 “的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'; 
}

谢谢！

来源

2014-09-19 user1087110

jsfiddle：http://jsfiddle.net/feeela/2zr5Lgfo/ – feeela 2014-09-19 10:33:49

当网页中需要大量这样的元素时，存储所有内容可能不是一个好主意。 – 2014-09-19 10:33:51

以下示例在不使用“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）查找东西有点慢，但如果出现问题，我会担心它。 :-)

来源

2014-09-19 10:34:45

我对如何编写ID和函数有特殊的模式。在我的情况下，不会有冲突。另外我绝不会与其他程序员分享我的代码。如果所有的现代浏览器都支持这种技术，并且他们打算继续这样做，我没有理由不尝试。但是，非常感谢您的回答！ – user1087110 2014-09-19 13:15:44

几个星期前我发现了这种技术，并一直使用它。它适用于所有浏览器，包括移动浏览器。 – BlackMagic 2015-08-28 12:31:17

为什么不需要document.getElementById？

回答

相关问题