在浏览器控制台 ("$x(...)") 中迭代 xpath DOM 节点以使用答案

【问题标题】：Iterate in xpath DOM nodes in browser Console ("$x(…)") to work wiht在浏览器控制台 ("$x(...)") 中迭代 xpath DOM 节点以使用
【发布时间】：2021-08-22 22:14:20
【问题描述】：

这是我的第一个问题，我来自阿根廷，所以我会尽量做到准确。我有这部分 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?美元？一切都给了我一个错误。谢谢！

【问题讨论】：

标签： javascript loops dom xpath

【解决方案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

【讨论】：