Question

我发现在Chrome DevTools中建议使用$x进行XPath表达式查找。但是，如果一个人已经获得了所需的DOM元素并希望继续搜索，或者可能想获得一些父母属性，那该怎么办呢。

有没有办法从给定的DOM元素开始使用$x搜索（将此元素视为DOM根目录）？

Answer 1

尝试

$x

在谷歌Chrome控制台中输出

ƒ $x(xpath, [startNode]) { [Command Line API] }

这表明有一个可选的第二个参数被视为上下文节点或起始节点。

例如，当我使用

时在此页面上

var codeElements = $x('//*[. = "$x"]');

我得到了

(5) [code, code, pre.lang-xml.prettyprint.prettyprinted, code, span.pln]

在codeElements的控制台中，当我使用

时

var parentElements = codeElements.map(el => $x('..', el)[0]);

计算我得到的codeElements数组中每个项目的父节点

(5) [p, p, div#wmd-preview.wmd-preview, pre.lang-xml.prettyprint.prettyprinted, code]

代表parentElements。

因此，您可以将上下文节点作为第二个参数传递给$x。

Answer 2

是的，$x接受名为startNode的第二个参数，正如其名称所暗示的那样，正是您正在寻找的。

你可以像这样使用它：

var myNode = document.getElementById('myId'); // obtain any node in any manner you need to
var childElements = $x('*', myNode);
console.log(childElements.length);

Answer 3

是的，但您需要使用xpath表达式从一个特定标记开始，然后跳转到另一个标记或获取属性，示例

//span[@id='test23']//..//a[@id='233']

还使用“祖先”，“跟随”，“跟随兄弟”等关键字等。

我建议你在网上的Xpath上查找更多

通过XPath查找DOM元素，从其他DOM元素开始

3 个答案: