使用 JavaScript 通过 XPath 获取元素 - 示例
使用 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();
}
这次我们将 XPAthResult.ANY_TYPE 设置为结果类型，它返回所提供的 XPath 表达式的任何类型结果。
返回的 XPathResult 对象是一组匹配节点，其行为类似于迭代器。
我们可以使用 XPathResult 对象的 iterateNext() 方法访问各个节点。
一旦我们遍历了所有节点，iterateNext() 方法将返回 null。
请注意，修改节点会使迭代器失效。 修改节点后，尝试迭代结果会产生错误。
相关文章
Do you understand JavaScript closures?
发布时间：2025/02/21 浏览次数：108 分类：JavaScript
-
The function of a closure can be inferred from its name, suggesting that it is related to the concept of scope. A closure itself is a core concept in JavaScript, and being a core concept, it is naturally also a difficult one.
Do you know about the hidden traps in variables in JavaScript?
发布时间：2025/02/21 浏览次数：178 分类：JavaScript
-
Whether you're just starting to learn JavaScript or have been using it for a long time, I believe you'll encounter some traps related to JavaScript variable scope. The goal is to identify these traps before you fall into them, in order to av
How much do you know about the Prototype Chain?
发布时间：2025/02/21 浏览次数：150 分类：JavaScript
-
The prototype chain can be considered one of the core features of JavaScript, and certainly one of its more challenging aspects. If you've learned other object-oriented programming languages, you may find it somewhat confusing when you start
如何在 JavaScript 中合并两个数组而不出现重复的情况
发布时间：2024/03/23 浏览次数：86 分类：JavaScript
-
本教程介绍了如何在 JavaScript 中合并两个数组，以及如何删除任何重复的数组。
