document.getElementById()如何搜索DOM树?

时间:2015-05-21 10:33:49

标签: javascript html performance dom search

我知道有些浏览器(今天大多数?)制作一个包含ID的所有元素的哈希表。因此,在这种情况下,对document.getElementById()的调用只能搜索哈希表。但是在DOM树的上下文中它将如何做到这一点 - 例如它是深度优先搜索吗?

我问,因为我想知道放置DOM元素的最快位置在哪里,因此可以在搜索本身开始时或接近搜索时找到它。

快速浏览一下,无法找到有关此主题的任何信息。

非常需要任何帮助。

1 个答案:

答案 0 :(得分:6)

由于DOM实现与浏览器有关,因此每个浏览器都可以以不同的方式实现它。浏览器还有可能拥有所有ID的哈希映射,并使用它执行document.getElementById

为了理解浏览器在DOM中查找的顺序,您可以查看包含document.all中所有DOM元素的简单列表的document集合。对于Chrome,Safari和Firefox,它似乎是DFS。

另一个有趣的问题是:如果同一文档中的两个元素具有相同的ID,则document.getElementById将返回哪个元素。使用下面的代码片段可以看出,它是使用DFS算法找到的第一个元素(至少在下面提到的浏览器中)。

<强> HTML

<div>
  <div id="id" data-index="DFS"></div>
</div>
<div id="id" data-index="BFS"></div>

<强>的JavaScript

console.log(document.getElementById('id').getAttribute('data-index'));

控制台输出

DFS

<强> Plunker

http://plnkr.co/edit/jaUolyxwrZcXsNXwkmtm?p=preview

<强> 编辑:

关于答案评论中的其他问题

  

我不确定搜索是否会停在第一个结果的位置,这当然会更快......有没有办法测试这个?

下面你可以找到一个代码片段,它在另一个内部和一个兄弟元素中创建10000个元素。在一种情况下,相同的ID设置为最深的元素和兄弟元素,而另一个ID设置为所有元素。第二种情况比第一种情况快约10倍。这证明在找到具有匹配ID的第一个元素后搜索停止。

<强>的JavaScript

function Div(el) {
    var div = document.createElement('div');
    el.appendChild(div);
    return div;
}

var i, body, el, t0, t1;

el = body = document.querySelector('body');
for(i=0; i<10000; i++) {
    el = new Div(el);
    el.setAttribute('id', 'ix'); // <- setting id="id" in this line will produce ~10x time difference
}
el.setAttribute('id', 'id');

el = new Div(body);
el.setAttribute('id', 'id');

t0 = performance.now();
document.getElementById('id');
t1 = performance.now();

console.log('Time to find element by ID: ' + (t1 - t0) + 'ms');

<强> Plunker

http://plnkr.co/edit/jmGRJvq0qB7qMyyMULhz?p=info