使用querySelectorAll和XPath contains函数

Question

我非常熟悉在PHP中使用XPath，并希望在JavaScript中使用它，最终目标是制作一个扩展来帮助我完成一些任务。

我有以下的XPath代码，在Chrome的开发者工具中测试过并且可以正常工作：

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

然而，它似乎无法与 querySelectorAll 配合使用。但以下内容可以：

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

我还注意到，在XPath中使用//似乎会引发错误，说它不是一个有效的选择器。

- Neil

---

后者是CSS选择器，而不是XPATH。.querySelectorAll需要CSS选择器。 - VLAZ

谢谢，我似乎在XPath和querySelector之间感到困惑。还要感谢您更好地解决我的问题 :) - Neil

小心XY陷阱。 - Jonathan

Answer 1

阅读了关于querySelector的内容之后，我发现以下代码与我试图实现的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);

}

- Neil

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>

- Jonathan