Question

假设我有以下HTML结构

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

现在我需要点击＆＃34; foo＆＃34;，＆＃34; bar＆＃34;的innerHTML变成了＃34;你好＆＃34;。我基本上有两种方法可以进入＆＃34; bar＆＃34;元素：

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）永远不会改变的任何查找或计算。并且你应该在页面加载时进行查找，这样在用户完成某些操作之后不会发生查找，但是在用户什么都不做的情况下进行查找（在此期间，用户什么都不做，你可以自由地预先加载和预先缓存东西。

JAVASCRIPT DOM搜索或DOM关系，这是更快的方法吗？

1 个答案: