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)查找速度有点慢,但是如果出现问题,我会担心它.:-)
| 归档时间: |
|
| 查看次数: |
3257 次 |
| 最近记录: |