Chrome DevTools中如何基于已有DOM元素使用$x进行XPath查询？

当然可以！Chrome DevTools里的$x函数其实支持传入第二个参数来指定查询的上下文节点（也就是你说的根节点），完美适配你提到的两种使用场景：

1. 以已获取的DOM元素为根搜索子元素 #

假设你已经通过某种方式拿到了目标DOM元素，比如用querySelector获取：

const targetEl = document.querySelector('.target-container');

接下来要以这个元素为根，用XPath搜索它的子元素，只需要把这个元素作为第二个参数传给$x就行。注意XPath表达式里要用.//开头（表示从当前上下文节点开始搜索，而不是整个文档根）：

// 搜索targetEl下所有包含"child-item"类的div
$x('.//div[contains(@class, "child-item")]', targetEl);

2. 基于目标元素获取父元素的属性 #

如果要从目标元素出发，向上查询父元素的属性，同样可以用上下文参数配合合适的XPath表达式。比如要获取目标元素父元素的data-id属性：

// 假设targetEl已经存在
const parentDataId = $x('./parent::*/@data-id', targetEl)[0].value;
console.log(parentDataId);

这里的./parent::*表示选中当前上下文节点的父元素，@data-id则提取该元素的对应属性。因为$x返回的是匹配结果的数组，所以我们取第一个元素的value属性拿到具体值。

小技巧：利用控制台的$0快速测试 #

如果你在Elements面板选中了某个元素，控制台里可以直接用$0指代这个元素，不用额外赋值，比如：

// 搜索当前选中元素下的所有a标签
$x('.//a', $0);

内容的提问来源于stack exchange，提问作者egor7