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

在前端开发中，我们经常需要对 DOM 树进行复杂的节点查询。虽然 querySelector 和 querySelectorAll 已经能够满足大部分 CSS 选择器需求，但在某些场景下，我们需要更强大的查询能力，比如根据节点的文本内容查找、根据属性是否存在进行匹配、或者执行更复杂的条件组合。这时候，XPath 就派上了用场。

XPath（XML Path Language）是一种在 XML 和 HTML 文档中查找信息的语言。在浏览器环境中，XPathEvaluator 接口为我们提供了对 XPath 表达式进行编译和求值的能力。今天这篇文章，我们将系统学习这个接口的全部核心内容。

一、XPathEvaluator 概述

XPathEvaluator 是一个基线广泛可用的接口，它能够对 XPath 表达式进行编译和求值。这个接口的实现通常集成在 Document 对象中，也就是说我们可以直接通过 document 来调用相关方法，也可以独立创建 XPathEvaluator 实例来使用。

XPath 表达式可以精确地定位 DOM 树中的节点、属性或文本内容，比 CSS 选择器提供了更多的灵活性。例如，XPath 可以轻松地选择包含特定文本的元素，或者根据节点在树中的相对位置进行查询。

示例：创建一个 XPathEvaluator 实例

// 创建一个独立的 XPathEvaluator 实例constevaluator=newXPathEvaluator();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 元素

<div>XPath example</div><div>Number of<div>s:<output></output></div>

constevaluator=newXPathEvaluator();// 执行 XPath 表达式，查询所有 div 元素constresult=evaluator.evaluate("//div",document,null,XPathResult.ORDERED_NODE_SNAPSHOT_TYPE);// 将匹配的节点数量显示在页面上document.querySelector("output").textContent=result.snapshotLength;

在这个例子中，我们使用 XPath 表达式 “//div” 来查询文档中所有的

三、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：返回第一个匹配节点

示例：使用不同的结果类型进行查询

<divclass="item"data-price="25">商品A</div><divclass="item"data-price="30">商品B</div><divclass="item"data-price="45">商品C</div><div>总价格：<output></output></div>

constevaluator=newXPathEvaluator();// 返回数值类型：计算所有商品的 price 属性值之和constsumResult=evaluator.evaluate("sum(//div[@data-price]/@data-price)",document,null,XPathResult.NUMBER_TYPE);document.querySelector("output").textContent=sumResult.numberValue;// 输出：100// 返回字符串类型：获取第一个商品文本conststringResult=evaluator.evaluate("string(//div[@class='item'][1])",document,null,XPathResult.STRING_TYPE);console.log(stringResult.stringValue);// 输出：商品A// 返回布尔类型：判断是否存在价格大于 40 的商品constboolResult=evaluator.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 表达式并多次求值

<divclass="section"><pclass="text">第一段内容</p><pclass="text">第二段内容</p></div><divclass="section"><pclass="text">第三段内容</p></div><div>段落总数：<output></output></div>

constevaluator=newXPathEvaluator();// 预编译 XPath 表达式constexpression=evaluator.createExpression("//p[@class='text']",null);// 在整个文档上求值constresult1=expression.evaluate(document,XPathResult.ORDERED_NODE_SNAPSHOT_TYPE);console.log(result1.snapshotLength);// 输出：3// 在第一个 section 上求值constfirstSection=document.querySelector(".section");constresult2=expression.evaluate(firstSection,XPathResult.ORDERED_NODE_SNAPSHOT_TYPE);console.log(result2.snapshotLength);// 输出：2// 显示总数document.querySelector("output").textContent=result1.snapshotLength;

通过预编译表达式，我们可以在不同的上下文节点上重复使用同一个表达式对象，从而避免了每次都需要重新解析 XPath 字符串的开销。

五、XPathEvaluator.createNSResolver() 方法

定义

createNSResolver() 方法曾经用于创建自定义的命名空间解析器对象。然而，这个功能已经被废弃，目前该方法直接返回传入的节点本身，保留它只是为了兼容性目的。

语法

createNSResolver(nodeResolver)

nodeResolver：一个 Node 对象

返回值：直接返回 nodeResolver 本身

示例：createNSResolver 的当前行为

constevaluator=newXPathEvaluator();constdiv=document.createElement("div");// 调用 createNSResolverconstresolver=evaluator.createNSResolver(div);// 现在直接返回传入的节点console.log(resolver===div);// 输出：true

由于该方法已经被废弃，在新代码中应避免使用它。对于命名空间的解析，可以直接使用实现了 lookupNamespaceURI 方法的对象，或者使用节点的 lookupNamespaceURI 方法。

六、在 XML 文档中使用 XPathEvaluator

XPath 在处理 XML 文档时尤其强大，因为 XML 通常包含更复杂的结构和命名空间。虽然现代 Web 开发以 HTML 为主，但在处理 SVG、MathML 或纯 XML 数据时，XPathEvaluator 依然是不可或缺的工具。

示例：在 XML 数据中使用 XPath 查询

// 创建一个 XML 文档constxmlString=`<?xml version="1.0" encoding="UTF-8"?> <library> <book category="fiction"> <title lang="en">The Great Gatsby</title> <author>F. Scott Fitzgerald</author> <year>1925</year> </book> <book category="fiction"> <title lang="en">To Kill a Mockingbird</title> <author>Harper Lee</author> <year>1960</year> </book> <book category="non-fiction"> <title lang="en">Sapiens</title> <author>Yuval Noah Harari</author> <year>2011</year> </book> </library>`;constparser=newDOMParser();constxmlDoc=parser.parseFromString(xmlString,"application/xml");constevaluator=newXPathEvaluator();// 查询所有 fiction 类别的书籍标题constresult=evaluator.evaluate("//book[@category='fiction']/title/text()",xmlDoc,null,XPathResult.ORDERED_NODE_SNAPSHOT_TYPE);// 输出所有匹配的标题for(leti=0;i<result.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（更常见）constresult1=document.evaluate("//div",document,null,XPathResult.ORDERED_NODE_SNAPSHOT_TYPE,null);// 方式二：使用 XPathEvaluator 实例constevaluator=newXPathEvaluator();constresult2=evaluator.evaluate("//div",document,null,XPathResult.ORDERED_NODE_SNAPSHOT_TYPE);console.log(result1.snapshotLength===result2.snapshotLength);// true

两种方式在功能上是等价的。document.evaluate() 更简洁，适合一次性查询。而 XPathEvaluator 实例更独立，适合需要预编译表达式或封装查询逻辑的场景。

八、实际应用场景

XPathEvaluator 在实际开发中有多种应用场景，以下是一些常见的例子。

场景一：根据文本内容查找元素

<ul><li>苹果</li><li>香蕉</li><li>苹果派</li><li>橘子</li></ul>

constevaluator=newXPathEvaluator();// 查找包含“苹果”文本的 li 元素constresult=evaluator.evaluate("//li[contains(text(), '苹果')]",document,null,XPathResult.ORDERED_NODE_SNAPSHOT_TYPE);for(leti=0;i<result.snapshotLength;i++){console.log(result.snapshotItem(i).textContent);}// 输出：苹果、苹果派

这个功能是 CSS 选择器无法直接实现的，因为在 CSS 中没有根据文本内容匹配元素的选择器。

场景二：在自动化测试中定位元素

// 在测试脚本中定位具有特定属性的元素functionfindElementByXPath(xpath){constevaluator=newXPathEvaluator();constresult=evaluator.evaluate(xpath,document,null,XPathResult.FIRST_ORDERED_NODE_TYPE);returnresult.singleNodeValue;}// 使用示例constbutton=findElementByXPath("//button[@data-testid='submit-btn']");if(button){button.click();}

XPath 在自动化测试框架（如 Selenium、Puppeteer）中被广泛使用，因为它提供了比 CSS 选择器更强大的定位能力。

九、注意事项和性能考量

虽然 XPath 功能强大，但在使用时需要注意以下几点。

性能问题

XPath 表达式的求值通常比 CSS 选择器慢，尤其是在大型 DOM 树上执行复杂表达式时。因此，在性能敏感的场景中，应优先使用 querySelector 或 querySelectorAll。

示例：性能对比

console.time("CSS Selector");constcssResult=document.querySelectorAll("div.item > p.text");console.timeEnd("CSS Selector");console.time("XPath");constevaluator=newXPathEvaluator();constxpathResult=evaluator.evaluate("//div[@class='item']/p[@class='text']",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 交互基础、全站导航开发等硬核内容，带你从新手快速进阶，轻松搞定前端开发！