Question

每个人都知道像document.getElementByID(...)和document.querySelector(...)那样的DOM选择器以及如何将它与类，属性，id等一起使用。

但我无法找到它是如何工作的（我可以找到perf test comparisons，但我对理论感兴趣）。我知道html页面是加载的，由浏览器解析并构建DOM树。但是每个选择器如何遍历DOM树以找到元素。

我看了spec for parsing algorithm并阅读了非常好的explanation how Browsers work，但它也提供了关于HTML，CSS解析和渲染流程的优秀解释，它没有解释每个选择器如何遍历这棵树找到了元素。

我假设为了找到像.black或span这样的东西，它需要遍历整个树，但是为了找到#id，它可能会遍历一些额外的数据结构，从而制作它快得多。请不要写下您的假设，我正在寻找具备备份到规范或在某些浏览器中实现的具体知识。

Answer 1

检查Firefox's source并阅读the related documentation将有助于获得一些初步见解获取文档后，将其传递给解析器（请参阅：/mozilla/parser/html/），该解析器将咀嚼文档并生成内容树。解析器的核心部分是用Java（/mozilla/parser/html/javasrc/）编写的，然后转换为C ++进行构建，所以当你想要阅读其余的源代码时，请准备好。

查看解析器的源（/mozilla/parser/html/javasrc/TreeBuilder.java），即函数startTag的摘录：

1579         if (errorHandler != null) {
1580             // ID uniqueness
1581             @IdType String id = attributes.getId();
1582             if (id != null) {
1583                 LocatorImpl oldLoc = idLocations.get(id);
1584                 if (oldLoc != null) {
1585                     err("Duplicate ID \u201C" + id + "\u201D.");
1586                     errorHandler.warning(new SAXParseException(
1587                             "The first occurrence of ID \u201C" + id
1588                             + "\u201D was here.", oldLoc));
1589                 } else {
1590                     idLocations.put(id, new LocatorImpl(tokenizer));
1591                 }
1592             }
1593         }

将注意力转向第1590行，并记住早先在同一档案中我们有：

459     private final Map<String, LocatorImpl> idLocations = new HashMap<String, LocatorImpl>();

我们可以看到节点ID保存在一个简单的哈希映射中。查看如何处理类是一个留给读者的练习。

不同的DOM方法（例如document.getElementByID(...)）通过粘合代码和过多的对象层次结构连接到此哈希映射，请参阅"How is the web-exposed DOM implemented?" on ask.mozilla.org。

querySelector如何在引擎盖下工作？

1 个答案: