Как я могу выбрать анонимный HTML-элемент с текстовым значением?

#javascript #css #dom #dom-manipulation

#javascript #css #dom #dom-манипуляция

Вопрос:

Вы знаете, что в наши дни мы используем CSS-модули или что-то вроде class и id concealer . Но на этот раз я должен выбрать эти элементы с помощью селекторов JS. Но я не могу с этим справиться.

У меня есть пример здесь. Вы можете увидеть главный экран YouTube здесь. Я хочу выбрать кнопку боковой панели «Подписка». Я думаю, что я должен использовать текстовое значение «Подписки», например document.getElementByValue("Subscription") , что вы думаете об этом. Существует ли нечто подобное?

Как я могу выбрать использование с помощью селекторов JS?

Источник, который я нашел во время исследования:

1. document.getElementByValue("Subscriptions")[0] попробуйте это

2. @RayeesAC я устал, но журнал консоли Uncaught TypeError: document.getElementByValue is not a function at <anonymous>:1:10

3. затем попробуйте getElementById("endpoint").value

4. В js нет такого понятия, как «document.getElementByValue», а идентификатор конечной точки не уникален. Попробуйте посмотреть мое решение.

5. @RayeesAC Сори, но ваши решения не работают. Но спасибо за попытку.

Ответ №1:

Выделенный на скриншоте элемент не уникален по смыслу классов. Вы можете, например, выбрать все элементы с такими классами и в цикле найти, который содержит текстовую подписку. Приведенный ниже код находит соответствующий элемент и получает span внутри него.

 document.querySelector("[aria-label='Subscriptions'] span")

1. Спасибо @Alexander Smirnov, это работа. Но у меня есть еще один вопрос, если я хочу выбрать верхний элемент этого элемента. Как я могу это сделать? Я хочу выбрать весь элемент подписки

2. Вы имеете в виду yt-icon ? Просто замените span в ответе на yt-icon . Каков верхний элемент этого элемента в вашем случае? Это родительский элемент или его родной брат перед ним? Если родительский, то document.querySelector(...).parentNode . Если sibling, то я не знаю.

3. Это определенно решение моего вопроса. Спасибо, брат, я так ценю это.

Ответ №2:

попробуйте это вместо этого, вы можете найти по названию в качестве подписок рядом с диапазоном

 var obj = document.querySelector("title='Subscriptions'] span.title");
console.log(obj.value)

Ответ №3:

Хорошо, ребята, я решил свою проблему. Большое вам спасибо за помощь @Alexander Smirnov.

Вы можете использовать оба селектора. Я извлекаю уроки из этой .parentNode концепции вопроса, это так полезно для меня.

 document.getElementsByClassName('style-scope ytd-mini-guide-renderer')[3]

или

 document.querySelector("[aria-label='Subscriptions'] span").parentNode