Question

我对PHP中的XPath非常熟悉，并希望在JavaScript中使用它，最终目的是进行扩展以帮助我做一些事情。

我有以下XPath可以在Chrome的开发工具中运行并经过测试：

//div[contains(@data-bt,'rank')]

但是，它似乎不适用于 querySelectorAll 。但是，有以下情况：

document.querySelectorAll("div[data-bt]")

我还注意到，在XPath上使用//似乎引发错误，表明它不是有效的选择器。

Answer 1

在阅读有关querySelectors的信息后，我发现以下内容与我尝试实现的xpath相同。

x = document.querySelectorAll('div[data-bt*="rank"]');

for (var i = 0; i < x.length; i++) {

    json_str = x[i].getAttribute('data-bt');
    data = JSON.parse(json_str);
    console.log(data.id);

}

Answer 2

即使我不确定您要完成的任务是什么，下面的代码片段也可能会有所帮助。

const nodeList = document.querySelectorAll('[data-bt*="rank"]');
const identifiers = Array.from(nodeList).map(node =>
  ({
    id: node.dataset.id,
    bt: node.dataset.bt
  }));

console.log(identifiers);

<div data-id="1" data-bt="rank1">Rank 1</div>
<div data-id="2" data-bt="rank2">Rank 2</div>
<div data-id="3" data-bt="rank3">Rank 3</div>

使用XPath包含querySelectorAll

2 个答案: