为什么不需要 document.getElementById? [英] Why is document.getElementById not needed?
问题描述
1) 问题 1
以下示例不使用document.getElementById('myId')".为什么会这样，是否可以跳过document.getElementById('myId')"?
<头><meta charset="UTF-8"><title>Javascript问题</title><脚本>window.onload = 函数(){myId.style.color = '红色';}<身体><div id=myId><p>将此颜色设为红色.</p></html>
2) 问题 2
我通常存储浏览器对象以减少 DOM 遍历(参见下面的示例).如果我不将 ID 存储在变量中，或者它已经是一个变量，它会更多地进行 DOM 遍历吗?
window.onload = function(){var myId = document.getElementById('myId');/* 存储的 ID 将被多次使用 */myId.style.color = '红色';}谢谢！
以下示例不使用document.getElementById('myId')".为什么会这样，是否可以跳过document.getElementById('myId')"?
因为浏览器会将所有带有 id 的元素的引用转储到全局命名空间中，使用 id 作为变量名.(从技术上讲，作为全局对象的属性名称；全局对象的属性是全局变量.)我强烈建议不要依赖它并使用document.getElementById (或类似的)代替.全局命名空间非常拥挤，而且还有很多其他可能发生冲突的东西.
例如，如果你有
<div id="foo">...</div>和
function foo() {}然后只在你的代码中使用 foo 会给你函数，而不是元素.
同样的，如果你有
...并在您的代码中使用 name，您将获得窗口的名称(一个字符串)，而不是您的 id="的 字段.HTMLInputElement名称"
将元素的引用转储到全局命名空间中的业务在 HTML5 规范的第 5.2.4 节，在本例中主要记录浏览器长期以来所做的工作.
<块引用>如果我不将 ID 存储在变量中，或者它已经是一个变量，它会更多地进行 DOM 遍历吗?
上面已经是一个全局变量，所以没有额外的 DOM 遍历.在深度嵌套的函数中，可能会有更多的作用域链遍历，但这不太可能成为主要问题.
<小时>但同样，我强烈建议不要依赖自动元素全局变量.相反，将您的代码包装在范围函数中(如您所示)，并使用 getElementById、querySelector、querySelectorAll 故意获取元素等，视情况而定.如果您依赖于自动全局变量，那么您最终很可能会陷入冲突.但这是意见.
请注意，使用 getElementById 查找元素真的非常快，因此出于性能原因通常不需要缓存引用(您可能希望这样做是出于其他原因，例如编码方便).使用选择器(querySelector、querySelectorAll)进行查找会有点慢，但我会说当/如果出现问题时要担心.:-)
1) Question 1
The following example works without using "document.getElementById('myId')". Why is that and is it OK to skip "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) Question 2
I usually store browser-objects to reduce DOM traversal (see example below). Will it be more DOM traversal if I dont store the ID in a variable or is it some how already a variable?
window.onload = function(){
var myId = document.getElementById('myId'); /* stored ID that will be used multiple times */
myId.style.color = 'red';
}
Thanks!
The following example works without using "document.getElementById('myId')". Why is that and is it OK to skip "document.getElementById('myId')"?
Because browsers dump references to all elements with ids into the global namespace, using the id as the variable name. (Technically, as the property name on the global object; properties of the global object are global variables.) I strongly recommend not relying on it and using document.getElementById (or similar) instead. The global namespace is really crowded and there are lots of other things there which can conflict.
For instance, if you have
<div id="foo">...</div>
and
function foo() {
}
Then just using foo in your code will give you the function, not the element.
Similarly if you have
<input type="text" id="name">
...and use name in your code, you'll get the window's name (a string), not the HTMLInputElement for your id="name" field.
This business of dumping references to the elements into the global namespace is covered in §5.2.4 of the HTML5 spec, which in this case is largely documenting what browsers have done for a long time.
Will it be more DOM traversal if I dont store the ID in a variable or is it some how already a varible?
It's already a global variable per the above, so there's no additional DOM traversal. In a deeply-nested function there may be more scope chain traversal, but that's unlikely to be a major issue.
But again, I strongly recommend not relying on the automatic element globals. Instead, wrap your code in a scoping function (as you've shown), and get the elements on purpose with getElementById, querySelector, querySelectorAll, etc., as appropriate. If you rely on the automatic globals, odds are eventually you'll get bitten by a conflict. But this is opinion.
Note that looking up elements with getElementById is really really fast, so caching references is not usually necessary for performance reasons (you may want to do so for other reasons, like coding convenience). Looking things up with selectors (querySelector, querySelectorAll) is a bit slower, but I'd say worry about it when/if there's a problem. :-)
这篇关于为什么不需要 document.getElementById?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
