document.getElementById（）如何搜索DOM树？ [英] How does document.getElementById() search the DOM tree?

问题描述

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

I know some browsers (most today?) make a Hash table of all elements with an ID. So in this case a call to document.getElementById() could just search the Hash table. But how will it do this otherwise in the context of the DOM tree - is it a depth first search for example?

我问，因为我想知道它在哪里放置DOM元素的最快的地方就是，所以它会在搜索本身开始时或接近搜索时发现。

I'm asking because I want to know where the quickest place to put a DOM element would be, so it is found in a search as soon as or close to when the search itself starts.

快速查看并且可以没有找到关于这个主题的任何信息。

Had a quick look and could not find any info on this subject specifically.

非常需要任何帮助。

推荐答案

由于DOM实现是依赖于浏览器的东西，因此每个浏览器都可以以不同的方式实现它。浏览器也有可能拥有所有ID的哈希映射，并使用它执行 document.getElementById 。

Since DOM implementation is browser dependent thing, every browser may implement it in a different manner. There is also a chance that browser do have a hash map for all IDs and performs document.getElementById using it.

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

In order to understand in which order browser looks up in the DOM, you can take a look at document.all collection that contains plain list of all DOM elements in the document. In case of Chrome, Safari and Firefox it seems to be DFS.

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

Another interesting question is: if two elements in the same document have the same ID, which one will be returned by document.getElementById. Using the snippet below it is possible to see, that it is the first element found using DFS algorithm (at least in the browsers mentioned bellow).

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/编辑/ jaUolyxwrZcXsNXwkmtm？p =预览

编辑：

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

Regarding additional question in the comment to the answer

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

I am not sure if the search will stop at the location of the first result, which would of course be quicker...is there a way to test this at all?

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

Below you can find a code snippet that creates 10000 elements one inside another and one sibling element. In one case the same ID is set to the deepest element and sibling element, in another to all elements. The second case is ~10x time faster than the first one. This proves that the search stops after the first element with matching ID is found.

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

这篇关于document.getElementById（）如何搜索DOM树？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！