使用 XPath 获取 DOM 节点 - Javascript

在 Javascript 中，我们可以使用 XPath 表达式来获取 DOM 节点。XPath 是一个用于选择 XML 文档中节点的语言，但同样适用于 HTML 文档。使用 XPath 可以更方便、更快速地定位 DOM 节点。

使用方法

在 Javascript 中，我们使用 document.evaluate 方法来执行 XPath 表达式，该方法返回一个 XPathResult 对象。方法的语法如下：

document.evaluate(path, contextNode, namespaceResolver, resultType, result);

参数说明：

• path：XPath 表达式，必填
• contextNode：要执行 XPath 表达式的上下文节点，可选，默认为 document
• namespaceResolver：命名空间解析器，可选，默认为 null
• resultType：XPathResult 类型，可选，默认为 XPathResult.ORDERED_NODE_ITERATOR_TYPE
• result：返回结果，可选，默认为 null

获取节点

下面是一个简单的例子，在该例子中，我们将使用 XPath 表达式获取页面中第一个 <li> 元素：

const li = document.evaluate('//li[1]', document, null, XPathResult.ORDERED_NODE_ITERATOR_TYPE, null).singleNodeValue;

该例子中，我们使用了 XPath 表达式 '//li[1]' 来获取第一个 <li> 元素。通过 XPathResult.ORDERED_NODE_ITERATOR_TYPE 参数，我们指定返回的结果类型为单个节点（即 XPathResultType.FIRST_ORDERED_NODE_TYPE），并通过 singleNodeValue 方法获取该节点。

获取节点列表

如果需要获取多个节点，则可以使用 XPathResultType.ORDERED_NODE_ITERATOR_TYPE 参数，并通过 iterateNext 方法来逐个获取节点。下面是一个获取所有 <li> 元素的例子：

const lis = [];
const xpathResult = document.evaluate('//li', document, null, XPathResult.ORDERED_NODE_ITERATOR_TYPE, null);
let li = xpathResult.iterateNext();
while (li) {
  lis.push(li);
  li = xpathResult.iterateNext();
}

该例子中，我们使用了 XPath 表达式 '//li' 来获取所有 <li> 元素。通过 XPathResultType.ORDERED_NODE_ITERATOR_TYPE 参数，我们指定返回的结果类型为节点列表，然后通过 iterateNext 方法逐个获取每个节点，并将节点添加到 lis 数组中。

获取节点的属性

如果需要获取节点的属性，则可以使用 XPathResultType.FIRST_ORDERED_NODE_TYPE 参数，并通过 nodeValue 方法来获取属性的值。下面是一个获取第一个 <li> 元素的 id 属性的例子：

const id = document.evaluate('//li[1]/@id', document, null, XPathResultType.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue.nodeValue;

该例子中，我们使用 XPath 表达式 '//li[1]/@id' 来获取第一个 <li> 元素的 id 属性。通过 XPathResultType.FIRST_ORDERED_NODE_TYPE 参数，我们指定返回的结果类型为单个节点，然后通过 singleNodeValue 方法获取该节点，并通过 nodeValue 方法获取属性的值。

总结

XPath 是一个强大的语言，可以用于选择复杂的节点结构。在 Javascript 中，我们可以使用 document.evaluate 方法来执行 XPath 表达式，并获取 DOM 节点及其属性。