使用 JavaScript 通过 XPath 获取元素 – 示例

作者

使用 JavaScript 通过 XPath 获取元素 – 示例

Get Element by XPath using JavaScript – Examples

使用该document.evaluate()方法通过 XPath 获取元素。该方法XPathResult基于提供的 XPath 表达式和提供的参数返回一个。

以下是本文示例的 HTML。

索引.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div>
      <p>Hello world</p>
    </div>
    <div>
      <p>Apple, Banana, Kiwi</p>
    </div>

    <script src="index.js"></script>
  </body>
</html>

这是相关的 JavaScript。

索引.js
// ✅ Get specific `p` element
const firstP = document.evaluate(
  '/html/body/div[2]/p',
  document,
  null,
  XPathResult.FIRST_ORDERED_NODE_TYPE,
  null,
).singleNodeValue;

console.log(firstP); // 👉️ p
console.log(firstP.textContent); // 👉️ "Apple, Banana, Kiwi"

// -----------------------
// ✅ Get all P elements
const allParagraphs = document.evaluate(
  '/html/body//p',
  document,
  null,
  XPathResult.ANY_TYPE,
  null,
);

console.log(allParagraphs);

let currentParagraph = allParagraphs.iterateNext();

while (currentParagraph) {
  console.log(currentParagraph.textContent);
  currentParagraph = allParagraphs.iterateNext();
}

我们使用
document.evaluate
方法获得XPathResult基于 XPath 表达式的。

第一个示例显示如何获取单个节点，而第二个示例获取节点集合并对其进行迭代。

该document.evaluate方法采用以下参数：

  1. xpathExpression– 要评估的 XPath
  2. contextNode– 查询的上下文节点（通常是文档）
  3. namespaceResolver– 应该null在处理 HTML 文档时
  4. resultType–

    要返回    的 XPathResult 的类型。
  5. result– 应该null

请注意，在第一个示例中，我们访问singleNodeValue了 XPathResult 对象的属性。

索引.js
// ✅ Get specific `p` element
const firstP = document.evaluate(
  '/html/body/div[2]/p',
  document,
  null,
  XPathResult.FIRST_ORDERED_NODE_TYPE,
  null,
).singleNodeValue;

console.log(firstP); // 👉️ p
console.log(firstP.textContent); // 👉️ "Apple, Banana, Kiwi"
该singleNodeValue属性返回第一个找到的与 XPath 表达式匹配的节点。

这将评估null节点集是否为空。

示例中要注意的另一件事是，我们指定了结果类型
XPathResult.FIRST_ORDERED_NODE_TYPE.

如果查看
XPath 结果类型表，该结果类型将返回与提供的 XPath 表达式匹配的任何单个节点。

在第二个示例中，我们使用了 XPath 表达式来获取p 文档中的所有元素并对结果进行迭代。
索引.js
// ✅ Get all P elements
const allParagraphs = document.evaluate(
  '/html/body//p',
  document,
  null,
  XPathResult.ANY_TYPE,
  null,
);

let currentParagraph = allParagraphs.iterateNext();

while (currentParagraph) {
  // 👇️ "Hello world", "Apple, Banana, Kiwi"
  console.log(currentParagraph.textContent);

  currentParagraph = allParagraphs.iterateNext();
}

这次我们设置XPAthResult.ANY_TYPE为结果类型，它返回所提供的 XPath 表达式的任何类型结果。

返回的XPathResult对象是一组匹配节点，其行为类似于迭代器。

我们可以使用对象的iterateNext()方法访问各个节点XPathResult。

一旦我们遍历了所有节点，该iterateNext()方法将返回null。

请注意，修改节点会使迭代器失效。修改节点后，尝试迭代结果会产生错误。

–