Как я могу выбрать элемент, используя его текстовое содержимое?

Question

У меня есть выпадающий список, который дает список <li> с дочерними <span> элементами, имеющими значения. Мне нужно выбрать дочерний элемент со значением «SecondElement» и щелкнуть по нему. Элемент не имеет идентификатора, и использование XPath здесь выглядит хрупким. Итак, как я могу использовать document.querySelector для извлечения этого элемента, который имеет значение «SecondElement». Когда я пробую приведенный ниже код, я получаю первый элемент.

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

Ниже вывод консоли получения 1-го элемента. Но мне нужно выбрать элемент, который имеет «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

Примечание: Это ответило на вопрос, который был первоначально опубликован, , который был :

Как выбрать элемент, используя его текстовое содержимое с документом.querySelector?

Из комментариев выяснилось, что это не настоящий вопрос ОП, хотя на этот вопрос хорошо ответил пост Андерссона .Я оставлю это, тем не менее, для тех, кому do нужно сделать это с 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"));

---

Сказав это: в комментариях к вопросу Андерссон , кажется, имеет хорошее мнение (например, здесь ) об использовании XPath для этого, если это вариант для вас.