document.head诉document.getElementsByTagName（“head”）[0]

Question

使用document.head和使用document.getElementsByTagName("head")[0]有什么区别？我跑的测试表明它们都需要大约一毫秒。

我也见过

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

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

如果一个更兼容，为什么还要使用另一个呢？

更新：正如一些人所指出的，我的测试是错误的。

Answer 1

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

所以

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

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

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

Answer 2

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

Answer 3

这比表演更方便（尽管document.head应该有一个可以忽略不计的好处）。使用你喜欢的，或者使用一个作为另一个的后备（如你的示例代码所做的那样）。有了后退是明智的，因为{6}中不支持document.head。

getElementsByTagName不太可能很快被弃用，所以这并不是一个很好的例子，说明什么时候提供回退是好事。您可以安全地使用更详细的路线，并在将来享受支持。

与旧版浏览器相比，这些类型的事物的更好示例将是事件，以及它们如何在现代浏览器中传递。看到这样的事情并不罕见：

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

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

同样，您的情况稍有不同，因为getElementsByTagName可能永远不会被弃用或消失window.event。

Answer 4

只是方便，因为每页只应该有一个。就像有document.body的直接快捷方式一样，虽然document.body是标准的，但您不需要后备。

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

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

如果您想要一个不需要随时间变化的版本，可以在脚本顶部执行以下操作

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

这样你就可以在你放弃对IE8的支持时改变那个地方（或者甚至可以把它留在那里，因为它没有伤害，但它将是死代码）。上面的代码也会确保你只查询一次DOM