在浏览器控制台 ( "$x(…)" ) 中的 xpath DOM 节点中进行迭代以使用

Question

这是我在这里的第一个问题，我来自阿根廷，所以我会尽量准确。我有DOM树的这一部分：

<div class="c-performance">
<div class="c-performance__title">
<h1>Desempeño</h1>
</div>
</div>
<div class="c-tela">
<div class="c-tela__title">
<h1>Pantalla</h1>
</div>
</div>
<div class="c-conectividade">
<div class="c-conectividade__title">Conectividad</div>
</div>

在浏览器中的控制台(在本例中为Firefox(中；divs"；节点，并能够做另一件事(现在无关紧要(。所以，我做了这个：

var a = $x('//div[contains(@class,"__title")]');
for (var i = 0; i < a.length; i++) {
var e = a[i]......('h1');
console.log(e);
}

在"……"中"我必须放什么$x$x？$？一切都给了我一个错误。非常感谢。

Answer 1

在这个firefox页面中有一个关于$x的文档：

https://developer.mozilla.org/en-US/docs/Tools/Web_Console/Helpers#$x

基于该页面，完整命令为：$x(xpath, element, resultType)

因此，您可以使用a[i]作为该命令中的元素：

var a = $x('//div[contains(@class,"__title")]');
for (var i = 0; i < a.length; i++) {
var e = $x('./h1',a[i]);
console.log(e);
}

注意，我们使用./h1来选择当前节点，而不是使用//h1来选择整个文档。有关这方面的更多信息可以在本主题中找到：

https://stackoverflow.com/a/45298762