使用 JavaScript 通过 XPath 获取元素

当前位置：主页 > 学无止境 > WEB前端 > JavaScript >

Vue React JavaScript Angular CSS HTML

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

作者：迹忆客最近更新：2022/11/27 浏览次数：

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

以下是本文示例的 HTML。

index.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。

// ✅ 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 方法来获取基于 XPath 表达式的 XPathResult。

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

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

xpathExpression - 要计算的 XPath
contextNode - 查询的上下文节点（通常是文档）
namespaceResolver - 在处理 HTML 文档时应该为 null
resultType - 要返回的 XPathResult 的类型。
result - 应该为空

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

// ✅ 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 元素并迭代结果。

// ✅ 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();
}