如何使用文本内容选择元素？

Question

我有一个下拉列表给出了<li>的列表，其中包含具有值的子<span>元素。我需要选择值为“SecondElement”的子元素并单击它。该元素没有id，使用XPath看起来很脆弱。那么我如何使用document.querySelector来获取具有值“SecondElement”的元素。当我尝试下面的代码时，我得到了第一个元素。

document.querySelector('.c-partnerSelector__menu__list > li > p > span')

下面是获取第一个元素的控制台输出。但我需要选择具有“SecondElement”作为值的元素。我不能在这里使用索引，因为这个元素的地方可以改变。

任何帮助将非常感激。

Answer 1

您可以使用以下XPath来获取具有所需文本内容的span：

//*[contains(@class, "c-partnerSelector__menu__list")]/li/p/span[.="SecondElement"]

这意味着与CSS选择器.c-partnerSelector__menu__list > li > p > span +谓词相同，以检查节点的文本内容

Answer 2

注意：这回答了最初发布的问题，which was：

如何使用document.querySelector的文本内容选择元素？

从评论中可以清楚地看出，这并不是OP的真正问题，但Andersson's post已经很好地回答了这个问题。不过，对于那些需要用querySelector或类似的人来说，我会留下这个。

---

CSS没有“包含”选择器（一个被提议，但它停滞不前，从未使它成为标准）。

你可以使用querySelectorAll，然后使用Array#find找到你想要的文本：

var list = document.querySelectorAll('.c-partnerSelector__menu__list > li > p > span');
var element = Array.prototype.find.call(list, function(el) {
    return el.innerText.includes("SecondElement");
});

ES2015 +在现代浏览器上看起来更清晰一点，这使得NodeList的querySelectorAll可以迭代：

const element = [...document.querySelectorAll('.c-partnerSelector__menu__list > li > p > span')]
                    .find(el => el.innerText.includes("SecondElement"));

---

话虽如此：在关于这个问题的评论中，Andersson似乎有一个关于使用XPath的好点（例如here），如果这是你的选择。