Javascript - 验证 xpath 是否存在：$x 与 document.evaluate？

Question

我需要验证网页上的特定元素是否存在。我只需要 true/false、null/string、0/1 或类似的响应。当我用谷歌搜索这个时，我找到的所有解决方案都使用

document.evaluate

（这也是ChatGPT建议的）。

为此目的，为什么

document.evaluate

优于

$x

？

$x 看起来更简单。

上下文正在编写浏览器脚本。

Answer 1

$x()

是一个开发工具实用程序

$x

是一个非标准工具，仅在浏览器开发者工具中可用。执行脚本时它不存在。

const result = $x("//p");

for (const next of result)
  console.log(`tag: ${next.tagName} content: ${next.textContent}`);
}

<p>One</p>
<p>Two</p>
<p>Three</p>
<div>Not a paragraph tag</div>

const result = document.evaluate("//p", document);
let next;
while (next = result.iterateNext()) {
  console.log(`tag: ${next.tagName} content: ${next.textContent}`);
}

<p>One</p>
<p>Two</p>
<p>Three</p>
<div>Not a paragraph tag</div>

浏览器开发工具之间

$x()

的实现并不一致

它在 Chrome 和 Firefox 中都实现了，但即使如此，它在两个地方的工作方式也不同。因此，即使您想以某种方式注入在浏览器控制台中运行的代码，但您的目标是多个浏览器，根据您调用的方式，您可能会得到不一致的结果

$x()

。

在 Chrome 中：

$x(路径[,起始节点])

$x(path) 返回与给定 XPath 表达式匹配的 DOM 元素数组。

[...]

与其他选择器函数类似，

$x(path)

有一个可选的第二个参数

startNode

，它指定要从中搜索元素的元素或节点。

在 Firefox 中：

$x(xpath, 元素, 结果类型)

在

xpath

的上下文中计算 XPath

element

表达式并返回匹配节点的数组。如果未指定，

element

默认为

document

。 resultType参数指定返回结果的类型；它可以是 XPathResult 常量，也可以是相应的字符串：

"number"

、

"string"

、

"bool"

、

"node"

或

"nodes"

；如果未提供，则使用

ANY_TYPE

。