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

我知道有些浏览器（现在大多数？）会用一个 ID 来创建所有元素的哈希表。因此在这种情况下，对 document.getElementById() 的调用只能搜索哈希表。但是在 DOM 树的上下文中它将如何执行此操作 - 例如，它是深度优先搜索吗？

我这么问是因为我想知道放置 DOM 元素的最快位置在哪里，因此在搜索本身开始时或接近时就会在搜索中找到它。

快速浏览了一下，找不到任何有关此主题的具体信息。

非常感谢任何帮助。

由于 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 http://plnkr.co/edit/jaUolyxwrZcXsNXwkmtm?p=preview

Edit:

关于答案评论中的附加问题

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

您可以在下面找到一段代码片段，该代码片段创建了 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 http://plnkr.co/edit/jmGRJvq0qB7qMyyMULhz?p=info