通过 XPath 获取元素 - JavaScript

XPath是一种用于在HTML或XML文档中选择元素的语言。在JavaScript中，我们可以使用XPath来获取文档中的元素。

基本用法

在JavaScript中，我们可以使用document.evaluate()方法来评估XPath表达式。例如，假设我们要获取所有包含类名为“foo”的元素：

const elements = document.evaluate("//div[contains(@class, 'foo')]", document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);

for (let i = 0; i < elements.snapshotLength; i++) {
    const element = elements.snapshotItem(i);
    console.log(element);
}

这里，我们使用document.evaluate()方法，并传递XPath表达式、命名空间上下文、命名空间预设、返回类型和结果对象。 在上面的例子中，我们返回了所有包含类名为“foo”的div元素，并将它们存储在elements变量中。接下来，我们可以使用for循环遍历元素，并访问它们的属性和方法。

XPath表达式

XPath表达式由不同的属性和操作符组成。下面列出了一些最常用的XPath表达式：

• //element：选择文档中的所有元素。
• /element：选择文档的根元素。
• element[@attribute = 'value']：选择具有指定属性和值的元素。
• element[n]：选择具有指定索引的元素。
• element[position() = n]：选择处于指定位置的元素。
• element[contains(@attribute, 'value')]：选择具有包含指定子串的属性的元素。
• element[starts-with(@attribute, 'value')]：选择具有以指定子串开头的属性的元素。

以下是一个示例XPath表达式，可以返回文档中所有具有类名为“foo”的div元素：

//div[contains(@class, 'foo')]

结论

XPath是一种强大的工具，可以帮助我们在复杂的HTML或XML文档中轻松查找和操作元素。JavaScript中的document.evaluate()方法，使我们能够快速获取文档中的元素，并使用它们进行后续操作。