跟着 MDN 学 HTML day_51：（深入理解 XPathEvaluator 接口）

在前端开发中我们经常需要对 DOM 树进行复杂的节点查询。虽然 querySelector 和 querySelectorAll 已经能够满足大部分 CSS 选择器需求但在某些场景下我们需要更强大的查询能力比如根据节点的文本内容查找、根据属性是否存在进行匹配、或者执行更复杂的条件组合。这时候XPath 就派上了用场。XPathXML Path Language是一种在 XML 和 HTML 文档中查找信息的语言。在浏览器环境中XPathEvaluator 接口为我们提供了对 XPath 表达式进行编译和求值的能力。今天这篇文章我们将系统学习这个接口的全部核心内容。一、XPathEvaluator 概述XPathEvaluator 是一个基线广泛可用的接口它能够对 XPath 表达式进行编译和求值。这个接口的实现通常集成在 Document 对象中也就是说我们可以直接通过 document 来调用相关方法也可以独立创建 XPathEvaluator 实例来使用。XPath 表达式可以精确地定位 DOM 树中的节点、属性或文本内容比 CSS 选择器提供了更多的灵活性。例如XPath 可以轻松地选择包含特定文本的元素或者根据节点在树中的相对位置进行查询。示例创建一个 XPathEvaluator 实例// 创建一个独立的 XPathEvaluator 实例constevaluatornewXPathEvaluator();console.log(evaluatorinstanceofXPathEvaluator);// true虽然我们可以直接使用 document.evaluate() 方法但独立的 XPathEvaluator 实例在某些模块化或需要独立作用域的场景下更为合适。二、XPathEvaluator.evaluate() 方法定义evaluate() 方法是 XPathEvaluator 接口中最核心的方法。它用于在给定的节点或文档上执行 XPath 表达式并返回一个 XPathResult 对象。语法evaluate(expression,contextNode)evaluate(expression,contextNode,resolver)evaluate(expression,contextNode,resolver,type)evaluate(expression,contextNode,resolver,type,result)参数说明expression字符串形式的 XPath 表达式contextNode作为求值上下文的节点resolver可选用于解析命名空间前缀的对象type可选指定返回结果的类型取自 XPathResult 的常量result可选可复用的结果对象示例使用 evaluate 查询所有 div 元素divXPath example/divdivNumber ofdivs:output/output/divconstevaluatornewXPathEvaluator();// 执行 XPath 表达式查询所有 div 元素constresultevaluator.evaluate(//div,document,null,XPathResult.ORDERED_NODE_SNAPSHOT_TYPE);// 将匹配的节点数量显示在页面上document.querySelector(output).textContentresult.snapshotLength;在这个例子中我们使用 XPath 表达式 “//div” 来查询文档中所有的元素。evaluate() 方法返回一个 XPathResult 对象通过 snapshotLength 属性获取匹配节点的数量。三、XPathResult 结果类型详解evaluate() 方法的 type 参数决定了返回结果的类型。XPathResult 接口定义了一系列常量来表示不同的结果类型。常用结果类型常量XPathResult.ANY_TYPE任意类型由表达式自然决定XPathResult.NUMBER_TYPE返回数值结果XPathResult.STRING_TYPE返回字符串结果XPathResult.BOOLEAN_TYPE返回布尔值结果XPathResult.ORDERED_NODE_SNAPSHOT_TYPE返回节点快照列表XPathResult.UNORDERED_NODE_ITERATOR_TYPE返回无序节点迭代器XPathResult.FIRST_ORDERED_NODE_TYPE返回第一个匹配节点示例使用不同的结果类型进行查询divclassitemdata-price25商品A/divdivclassitemdata-price30商品B/divdivclassitemdata-price45商品C/divdiv总价格output/output/divconstevaluatornewXPathEvaluator();// 返回数值类型计算所有商品的 price 属性值之和constsumResultevaluator.evaluate(sum(//div[data-price]/data-price),document,null,XPathResult.NUMBER_TYPE);document.querySelector(output).textContentsumResult.numberValue;// 输出100// 返回字符串类型获取第一个商品文本conststringResultevaluator.evaluate(string(//div[classitem][1]),document,null,XPathResult.STRING_TYPE);console.log(stringResult.stringValue);// 输出商品A// 返回布尔类型判断是否存在价格大于 40 的商品constboolResultevaluator.evaluate(boolean(//div[data-price 40]),document,null,XPathResult.BOOLEAN_TYPE);console.log(boolResult.booleanValue);// 输出true掌握不同的结果类型可以让我们更高效地获取需要的数据而不仅仅局限于获取节点列表。四、XPathEvaluator.createExpression() 方法定义createExpression() 方法用于创建一个预编译的 XPath 表达式对象。将表达式预编译后可以多次对其进行求值从而提升性能。这在需要重复执行相同 XPath 查询的场景下非常有用。语法createExpression(expression,resolver)expression字符串形式的 XPath 表达式resolver用于解析命名空间的对象通常可以传入 null示例预编译 XPath 表达式并多次求值divclasssectionpclasstext第一段内容/ppclasstext第二段内容/p/divdivclasssectionpclasstext第三段内容/p/divdiv段落总数output/output/divconstevaluatornewXPathEvaluator();// 预编译 XPath 表达式constexpressionevaluator.createExpression(//p[classtext],null);// 在整个文档上求值constresult1expression.evaluate(document,XPathResult.ORDERED_NODE_SNAPSHOT_TYPE);console.log(result1.snapshotLength);// 输出3// 在第一个 section 上求值constfirstSectiondocument.querySelector(.section);constresult2expression.evaluate(firstSection,XPathResult.ORDERED_NODE_SNAPSHOT_TYPE);console.log(result2.snapshotLength);// 输出2// 显示总数document.querySelector(output).textContentresult1.snapshotLength;通过预编译表达式我们可以在不同的上下文节点上重复使用同一个表达式对象从而避免了每次都需要重新解析 XPath 字符串的开销。五、XPathEvaluator.createNSResolver() 方法定义createNSResolver() 方法曾经用于创建自定义的命名空间解析器对象。然而这个功能已经被废弃目前该方法直接返回传入的节点本身保留它只是为了兼容性目的。语法createNSResolver(nodeResolver)nodeResolver一个 Node 对象返回值直接返回 nodeResolver 本身示例createNSResolver 的当前行为constevaluatornewXPathEvaluator();constdivdocument.createElement(div);// 调用 createNSResolverconstresolverevaluator.createNSResolver(div);// 现在直接返回传入的节点console.log(resolverdiv);// 输出true由于该方法已经被废弃在新代码中应避免使用它。对于命名空间的解析可以直接使用实现了 lookupNamespaceURI 方法的对象或者使用节点的 lookupNamespaceURI 方法。六、在 XML 文档中使用 XPathEvaluatorXPath 在处理 XML 文档时尤其强大因为 XML 通常包含更复杂的结构和命名空间。虽然现代 Web 开发以 HTML 为主但在处理 SVG、MathML 或纯 XML 数据时XPathEvaluator 依然是不可或缺的工具。示例在 XML 数据中使用 XPath 查询// 创建一个 XML 文档constxmlString?xml version1.0 encodingUTF-8? library book categoryfiction title langenThe Great Gatsby/title authorF. Scott Fitzgerald/author year1925/year /book book categoryfiction title langenTo Kill a Mockingbird/title authorHarper Lee/author year1960/year /book book categorynon-fiction title langenSapiens/title authorYuval Noah Harari/author year2011/year /book /library;constparsernewDOMParser();constxmlDocparser.parseFromString(xmlString,application/xml);constevaluatornewXPathEvaluator();// 查询所有 fiction 类别的书籍标题constresultevaluator.evaluate(//book[categoryfiction]/title/text(),xmlDoc,null,XPathResult.ORDERED_NODE_SNAPSHOT_TYPE);// 输出所有匹配的标题for(leti0;iresult.snapshotLength;i){console.log(result.snapshotItem(i).nodeValue);}// 输出// The Great Gatsby// To Kill a Mockingbird这个例子展示了如何使用 XPathEvaluator 在 XML 文档中执行复杂的条件查询并获取文本内容。在数据驱动的应用中这种技术非常实用。七、XPathEvaluator 与 document.evaluate 的关系在实际开发中我们经常会看到直接使用 document.evaluate() 方法的代码而不是创建 XPathEvaluator 实例。事实上document.evaluate() 是 XPathEvaluator 接口在 Document 上的直接实现。示例两种等价的使用方式// 方式一使用 document.evaluate更常见constresult1document.evaluate(//div,document,null,XPathResult.ORDERED_NODE_SNAPSHOT_TYPE,null);// 方式二使用 XPathEvaluator 实例constevaluatornewXPathEvaluator();constresult2evaluator.evaluate(//div,document,null,XPathResult.ORDERED_NODE_SNAPSHOT_TYPE);console.log(result1.snapshotLengthresult2.snapshotLength);// true两种方式在功能上是等价的。document.evaluate() 更简洁适合一次性查询。而 XPathEvaluator 实例更独立适合需要预编译表达式或封装查询逻辑的场景。八、实际应用场景XPathEvaluator 在实际开发中有多种应用场景以下是一些常见的例子。场景一根据文本内容查找元素ulli苹果/lili香蕉/lili苹果派/lili橘子/li/ulconstevaluatornewXPathEvaluator();// 查找包含“苹果”文本的 li 元素constresultevaluator.evaluate(//li[contains(text(), 苹果)],document,null,XPathResult.ORDERED_NODE_SNAPSHOT_TYPE);for(leti0;iresult.snapshotLength;i){console.log(result.snapshotItem(i).textContent);}// 输出苹果、苹果派这个功能是 CSS 选择器无法直接实现的因为在 CSS 中没有根据文本内容匹配元素的选择器。场景二在自动化测试中定位元素// 在测试脚本中定位具有特定属性的元素functionfindElementByXPath(xpath){constevaluatornewXPathEvaluator();constresultevaluator.evaluate(xpath,document,null,XPathResult.FIRST_ORDERED_NODE_TYPE);returnresult.singleNodeValue;}// 使用示例constbuttonfindElementByXPath(//button[data-testidsubmit-btn]);if(button){button.click();}XPath 在自动化测试框架如 Selenium、Puppeteer中被广泛使用因为它提供了比 CSS 选择器更强大的定位能力。九、注意事项和性能考量虽然 XPath 功能强大但在使用时需要注意以下几点。性能问题XPath 表达式的求值通常比 CSS 选择器慢尤其是在大型 DOM 树上执行复杂表达式时。因此在性能敏感的场景中应优先使用 querySelector 或 querySelectorAll。示例性能对比console.time(CSS Selector);constcssResultdocument.querySelectorAll(div.item p.text);console.timeEnd(CSS Selector);console.time(XPath);constevaluatornewXPathEvaluator();constxpathResultevaluator.evaluate(//div[classitem]/p[classtext],document,null,XPathResult.ORDERED_NODE_SNAPSHOT_TYPE);console.timeEnd(XPath);在大多数情况下CSS 选择器的性能优于 XPath。如果 CSS 选择器能够满足需求应优先使用它。只有在 CSS 选择器无法实现所需逻辑时才使用 XPath。十、总结今天的学习内容聚焦于 XPathEvaluator 接口我们从接口的基本概念开始逐步深入学习了 evaluate() 方法、createExpression() 方法、createNSResolver() 方法以及各种结果类型的使用。通过丰富的示例代码我们看到了 XPath 在复杂 DOM 查询中的强大能力。XPath 表达式为我们提供了一种在文档中定位节点的强大语言而 XPathEvaluator 接口则是在浏览器环境中使用这种语言的桥梁。虽然 CSS 选择器在日常开发中更为常用但掌握 XPath 能够让我们在遇到复杂查询需求时拥有更多的解决方案。希望本篇文章能帮助你理解并掌握 XPathEvaluator 接口的使用为后续的 DOM 操作与自动化测试打下坚实的基础。想要解锁更多HTML 核心标签实战、前端零基础入门干货、开发避坑全指南吗持续关注后续将更新CSS 布局实战、JavaScript 交互基础、全站导航开发等硬核内容带你从新手快速进阶轻松搞定前端开发