为什么不需要document.getElementById?

use*_*110 14 javascript variables

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>
Run Code Online (Sandbox Code Playgroud)

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';
}
Run Code Online (Sandbox Code Playgroud)

谢谢!

T.J*_*der 13

以下示例在不使用"document.getElementById('myId')"的情况下工作.为什么这样,可以跳过"document.getElementById('myId')"?

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

例如,如果你有

<div id="foo">...</div>
Run Code Online (Sandbox Code Playgroud)

function foo() {
}
Run Code Online (Sandbox Code Playgroud)

然后只需foo在代码中使用就会给你功能,而不是元素.

同样,如果你有

<input type="text" id="name">
Run Code Online (Sandbox Code Playgroud)

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

倾销的元素引用到全局命名空间的这项业务是覆盖在HTML5规范的§5.2.4,在这种情况下,主要是记录什么浏览器已经很长一段时间内完成.

如果我不将ID存储在变量中,或者它是如何变量的,那么它是否会更多DOM遍历?

它已经是上面的全局变量,因此没有额外的DOM遍历.在深度嵌套的函数中,可能会有更多的范围链遍历,但这不太可能是一个主要问题.


但同样,我强烈建议不要依赖自动元素全局变量.相反,包装你的代码在一个范围的功能(如你所示),并获得目的的元素用getElementById,querySelector,querySelectorAll等适当.如果你依赖于自动全局变量,最终你会被冲突所困扰.但这是意见.

需要注意的是仰视的元素getElementById非常非常快,所以缓存引用通常没有必要因为性能原因(可能需要其他原因这样做,编码一样方便).使用选择器(querySelector,querySelectorAll)查找速度有点慢,但是如果出现问题,我会担心它.:-)