每个人都知道像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,它可能会遍历一些额外的数据结构,从而使它更快.请不要写下你的假设,我正在寻找具备备份到规范或在某些浏览器中实现的具体知识.
解决方法
检查
Firefox’s source并阅读
the related documentation将有助于获得一些初步见解.
获取文档后,将其传递给解析器(参见： /mozilla/parser/html/),该解析器将浏览文档并生成内容树.解析器的中心部分用Java( /mozilla/parser/html/javasrc/)编写,然后转换为C进行构建,所以当你想要读取其余的源代码时,请准备好.
获取文档后,将其传递给解析器(参见： /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.