JAVASCRIPT DOM搜索或DOM关系，哪种方法更快？

假设我有以下HTML结构

<div>
    <div id="foo"></div>
</div>
<div>
    <div id="bar"></div>
</div>

---

这两个方法/属性都是原生DOM的一部分，但我想知道后者是否比前者稍快，因为getElementById应该遍历文档的所有ID，直到达到第一个匹配

更快的方法是在页面加载时缓存元素，以便将来查找：

var fooEl = document.getElementById("foo");
var barEl = document.getElementById("bar");

fooEl.onclick=function(){
    barEl.innerHTML="hello";
}

---

您应该缓存任何查找或计算，1）非常昂贵，2）永远不会更改。你应该在页面加载时进行查找，这样在用户完成某些操作后就不会进行查找，但查找是在用户不做任何事情时进行的（在此期间，用户不做任何事情，你可以自由地进行预加载和预缓存）。

你可以自己分析代码：，@Frank Dai，请考虑不仅更快，而且维护该代码。让我们假设在将来，您希望在两者之间放置一个简单的图像。然后，“this.parentNode.nextElementSibling.firstElementChild.innerHTML”之类的内容将停止工作。是的。我知道缓存，这种基于关系的代码很容易在将来修改。我的观点是哪种方式更快，即使差异可能小于2-3毫秒。哪种方式“更快”无关紧要。代码没有性能问题；见我对乔回答的评论。别担心；找到3%的代码，这些代码实际上会从优化中受益。在单击处理程序中执行查找无论如何都不会成为瓶颈。（当像可乐编码器一样点击时，我的最大点击量约为8次/秒。）考虑到这一点，按ID获取元素也是一个非常快速的操作（而且两次线性跟踪也不是一个昂贵的操作）。因为如果以后修改DOM，“缓存”元素可能会有问题（尽管特定的点击绑定不太可能），除非绑定一个闭包（变量）增加了好处，否则我不会这样做。代码没有性能问题，因此唯一关心的是清晰性/可维护性。

var fooEl = document.getElementById("foo");
var barEl = document.getElementById("bar");

fooEl.onclick=function(){
    barEl.innerHTML="hello";
}