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

Question

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

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

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

任何帮助将不胜感激。

Answer 1

注意：，它回答了最初发布的问题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");
});

在现代浏览器中，它使ES {+ {1}}中的NodeList变得可迭代：在ES2015 +中看起来更干净：

querySelectorAll

---

已经说过：在这个问题的评论中，Andersson对于使用XPath似乎有一个好处（例如here）。

>

Answer 2

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

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

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