javascript document.head 诉 document.getElementsByTagName("head")[0]

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/16204756/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 03:42:10  来源:igfitidea点击:

document.head v. document.getElementsByTagName("head")[0]

javascriptdom

提问by Brian McCutchon

What is the difference between using document.headand using document.getElementsByTagName("head")[0]? Tests I ran showed that they both take about a millisecond.

usingdocument.head和 using 和有什么不一样document.getElementsByTagName("head")[0]?我运行的测试表明它们都需要大约一毫秒。

I have also seen

我也见过

document.head||document.getElementsByTagName("head")[0];

which would have led me to believe that document.headis faster and the other is more more compatible, except that the tests I did disproved this.

这会让我相信它document.head更快,另一个更兼容,除了我所做的测试反驳了这一点。

And if one is more compatible, why use the other as well?

如果一个更兼容,为什么还要使用另一个?

Update:My tests were wrong, as some have pointed out.

更新:正如一些人指出的那样,我的测试是错误的。

采纳答案by Travis J

Using the ||operator like that is a form of feature detection. When used, if the first value is undefined it sends back the latter value.

||像这样使用运算符是特征检测的一种形式。使用时,如果第一个值未定义,则返回后一个值。

So for

因此对于

document.head || document.getElementsByTagName("head")[0];

the reason is that if document.headis not supported at least the right value is returned.

原因是如果document.head不支持,至少返回正确的值。

As for your speed test, a millisecond is a long time. I doubt it really took that long. In fact, I made a jsPerffor this. It shows that the getElementsByTagNamefunction is roughly 80% slower.

至于你的速度测试,一毫秒是很长的时间。我怀疑它真的花了那么长时间。事实上,我为此做了一个jsPerf。它表明该getElementsByTagName函数大约慢了 80%。

回答by Alex.Bullard

According to MDN, document.headonly gained support in IE 9, so using the other method as a fallback protects you from browser incompatibilities

根据MDNdocument.head仅在 IE 9 中获得支持,因此使用其他方法作为后备可以保护您免受浏览器不兼容的影响

回答by Sampson

This is more of a convenience matter than a performance one (though document.headshould have a negligible benefit). Use which ever you like, or, use one as a fallback to the other (as your example code does). Having the fallback is wise, since document.headis not support in IE 6-8.

这比性能更方便(尽管document.head应该有微不足道的好处)。使用您喜欢的任何一种,或者使用一种作为另一种的后备(如您的示例代码所做的那样)。回退是明智的,因为document.headIE 6-8 不支持。

It's not likely that getElementsByTagNamewill soon be deprecated, so this isn't a great example of when it's good to provide a fallback. You could safely use the more verbose route on its own and enjoy support on into the future.

不太可能getElementsByTagName很快会被弃用,因此这不是提供回退的好例子。您可以安全地单独使用更详细的路由,并享受未来的支持。

Better examples of these types of things would be events, and how they're passed around in modern browsers, compared to older browsers. It is not uncommon to see something like this:

与旧浏览器相比,这些类型的事情更好的例子是事件,以及它们在现代浏览器中的传递方式。看到这样的事情并不少见:

function callback (event) {
    var id = (event || window.event).target.id;
}

In this case though, the window.eventportion is necessary for legacy support. If the eventobject is undefined, we assume the event is a member on the windowobject. As browsers mature, window.eventceases to be a thing, and these tests unanimously return event.target.idinstead.

但是,在这种情况下,该window.event部分对于遗留支持是必需的。如果event对象是undefined,我们假设事件是window对象的成员。随着浏览器的成熟,window.event不再是一回事,而这些测试一致返回event.target.id

Again, your case is a bit different as getElementsByTagNamewill likely never be deprecated or vanish as window.eventdid.

同样,您的案例有点不同,因为它getElementsByTagName可能永远不会像window.event以前那样被弃用或消失。

回答by Juan Mendes

Just convenience because you are only supposed to have one per page. Just like there is a direct shortcut to document.body, although document.bodyis standard and you wouldn't need the fallback.

只是为了方便,因为您应该每页只有一个。就像有一个直接的快捷方式一样document.body,虽然document.body是标准的,你不需要回退。

document.body || document.getElementsByTagName("body")[0]

I wouldn't use document.headunless you only support IE9+. Until then, I would stick to document.getElementsByTagName("head")[0]

document.head除非你只支持 IE9+,否则我不会使用。在那之前,我会坚持document.getElementsByTagName("head")[0]

If you want a version that you don't have to change as time goes by, you can do the following at the top of your script

如果你想要一个不需要随着时间推移而改变的版本,你可以在你的脚本顶部执行以下操作

document.head = document.head || document.getElementsByTagName("head")[0];

That way you can just change that one place when you drop support for IE8 (or may even leave it there since it doesn't hurt, but it will be dead code). The above code would also make sure you only query the DOM once

这样你就可以在你放弃对 IE8 的支持时改变那个地方(或者甚至可以把它留在那里,因为它不会受到伤害,但它会是死代码)。上面的代码还可以确保你只查询一次 DOM