我知道一些浏览器（今天大多数？）为所有具有 ID 的元素创建一个哈希表。所以在这种情况下，对 document.getElementById() 的调用可以只搜索哈希表。但是在 DOM 树的上下文中，它将如何做到这一点 - 例如，它是深度优先搜索吗？
我问是因为我想知道放置 DOM 元素最快的位置在哪里，所以它会在搜索本身开始时立即或接近搜索时找到。
快速浏览了一下，没有找到关于这个主题的任何信息。
非常感谢任何帮助。
【问题讨论】：
标签： javascript html performance dom search
由于 DOM 实现依赖于浏览器，每个浏览器都可能以不同的方式实现它。浏览器也有可能拥有所有 ID 的哈希映射并使用它执行document.getElementById。
为了了解浏览器在 DOM 中的查找顺序，您可以查看 document.all 集合，该集合包含 document 中所有 DOM 元素的普通列表。对于 Chrome、Safari 和 Firefox，它似乎是 DFS。
另一个有趣的问题是：如果同一文档中的两个元素具有相同的 ID，document.getElementById 将返回哪一个。使用下面的 sn-p 可以看出，它是使用 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
编辑：
关于答案评论中的其他问题
我不确定搜索是否会在第一个结果的位置停止，这当然会更快...有没有办法对此进行测试？
您可以在下面找到一个代码 sn-p，它创建了 10000 个元素，一个内一个元素，一个兄弟元素。在一种情况下，相同的 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
【讨论】：