如何 select 具有文本值的匿名 HTML 元素？

Question

你知道这些天我们正在使用 CSS modules 或 class 之类的东西和 id 遮瑕膏。不过这次我要select那些元素用JS selector。 但我受不了了。

我这里有一个例子。您可以在此处查看 youtube 主屏幕。我想要 select “订阅” 侧边栏按钮。我想我必须使用像 document.getElementByValue("Subscription") 这样的“订阅”文本值。您对此有何看法。是否存在类似的东西？

我如何 select 与 JS selector 一起使用？

我在研究中找到的来源：

• https://css-tricks.com/css-modules-part-1-need/
• https://usefulangle.com/post/83/html-select-common-operations-with-javascript

Answer 1

在 类 的意义上，屏幕截图中突出显示的元素不是唯一的。 例如，您可以 select 所有具有此类 类 的元素，并在循环中查找包含文本订阅的元素。 下面的代码找到 suraunding 元素并在其中获取 span。

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

Answer 2

试试这个，您可以通过 title 找到 Subscriptions 在 span[ 附近=11=]

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

Answer 3

好的，我解决了我的问题。非常感谢你帮助我@Alexander Smirnov。

您可以使用两种选择器。我从那个问题中学到了 .parentNode 概念，它对我很有帮助。

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

或

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