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

Question

假设我有以下 HTML 结构

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

现在我需要当我点击“foo”时，“bar”的innerHTML变成“hello”。我基本上有两种方法可以到达“bar”元素：

document.getElementById("foo").onclick=function(){
    document.getElementById("bar").innerHTML="hello";
}

document.getElementById("foo").onclick=function(){
    this.parentNode.nextElementSibling.firstElementChild.innerHTML="hello";
}

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

Answer 1

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

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

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

您应该缓存任何 1) 昂贵且 2) 永远不会改变的查找或计算。并且您应该在页面加载时进行查找，以便在用户执行某些操作之后不会发生查找，而是在用户什么都不做时进行查找（在此期间，用户什么都不做，你可以免费进行预加载和预缓存）。