如何从Xpath中隔离document.querySelector中可用的选择器？

Question

我真的想用document.querySelector选择一个元素。问题是我工作的网站的制作者没有给这个元素提供任何标识符。

它只是网页中大约600个跨度中的一个，带有一个巨大的DOM，我不希望（也没有业余时间）手动计算DOM中的所有跨度以了解哪个项目引用{{ 1}}使用，因为它将是一场噩梦，必须有一些其他更好的方法，至少通过devtool得到项目参考。

到目前为止我尝试的选择方式

我试图复制＆＃34; Css路径＆＃34;或＆＃34; Css选择器＆＃34;并把它放在我的代码中：

span[n] // n == number

然而，在这两种情况下都没有选择该元素，也没有发生任何点击。

通过let myEl = document.querySelector('CSS-PATH-FROM-DEVTOOL'); myEl.click(); let myEl = document.querySelector('CSS-SELECTOR-FROM-DEVTOOL'); myEl.click(); 选择并不是很好，因为有许多跨度具有相同的textDocument。

利用Xpath进行选择

我理解在这样一个特殊的＆＃34;如果一个元素没有ID，类，使它成为唯一的，并且只是许多同类的一个标记，并且CSS路径或CSS选择器都没有帮助定位，那么我可以使用Xpath。

好吧，当我复制Xpath时，我得到了：

textDocument

我的问题

如何使用*[@id="js_30"]/div/ul/li[4]/a/span/span 来选择元素？

由于我是JS的新手，我尝试了以下没有帮助的内容，但该元素不会被点击：

document.querySelector

有没有办法直接选择该特定元素？

Answer 1

基于an answer by Utkanos，您可以这样做：

var elem,
    xpath = '*[@id="js_30"]/div/ul/li[4]/a/span/span',
    jq_sel = xpath
        .substr(14) // remove id part
        .replace(/\//g, ' > ')
        .replace(/\[(\d+)\]/g, function ($0, i) { return ':nth-child(' + i + ')'; });

// add id part: #js_30 > div > ul > li:nth-child(4) > a > span > span
jq_sel = '#js_30' + jq_sel;
 // query element
elem = document.querySelectorAll(jq_sel);
// simulate a mouse click
elem.click();

console.log("*");
console.log("xpath:", xpath);
console.log("jq_sel:", jq_sel);
console.log("elem:", elem);