根据浏览器中出现的文本选择按钮元素答案

【问题标题】：Select button elements based on appearing text in the browser根据浏览器中出现的文本选择按钮元素
【发布时间】：2020-12-23 16:56:55
【问题描述】：

（编辑：我忘了要求不要使用 jQuery）

我正在尝试根据显示的文本而不是它们的类或 ID 来选择 html 按钮。

所有按钮都具有相同的 dom 结构和类。如以下示例中的follow 和unfollow 按钮：

<button class="user-actions-follow-button js-follow-btn follow-button btn" type="button">
  <span class="button-text following-text">
     Following
  </span>
  <span class="button-text unfollow-text">
     Unfollow
  </span>
</button>

我找到的最接近的解决方案是基于像getElementsByClassName、getElementById和:contains()这样的dom结构，但我想不通。

EDIT2：
jQuery 中的解决方案是$('span:hidden:contains(Follow)').parent(); 但我正在寻找没有 jquery 的解决方案。

【问题讨论】：

标签： javascript jquery html dom

【解决方案1】：

试试下面的代码，你可以做相应的样式

$( "span:nth-child(1):contains('Following')" ).css( "background", "#ccc" );

【讨论】：

是的，:contains() 几乎做到了。 +1
每个按钮都有一个包含“关注”的跨度。我已经试过了。
相应地借助 nth-child 选择器样式
您正在选择跨度，这些跨度存在于每个 button 中。因此，这些跨度并不总是显示出来，我问的是如何获取显示这些跨度之一的父 button。

【解决方案2】：

您可以按如下方式将 id 分配给 span：

  <span id="follow" class="button-text following-text">
     Following
  </span>
  <span id="unfollow" class="button-text unfollow-text">
     Unfollow
  </span>

然后通过在javascript中使用下面的代码，您可以检查它们的状态

if(document.getElementById("follow").innerHTML=="Following"){
//follow 
}
if(document.getElementById("unfollow").innerHTML=="Unfollow"){
//unfollow 
}

【讨论】：

我不需要获得这些跨度。我可以通过contains() 获得它们。我需要得到父母button :)
最后你想用按钮做什么？

【解决方案3】：

我找到了一种使用 :hidden 的方法，但这是 jQuery，因此在我的情况下没有用。

$('span:hidden:contains(Follow)').parent();

我现在发现的最好的方法是先获取所有按钮，然后使用条件（需要 2 个步骤，但有效）。

var buttons=document.getElementsByClassName('...');
//loop...
    if ( window.getComputedStyle(buttons[i].getElementsByClassName('...')[0] ).display === 'none' ) {
        //buttons[i]
    }

如果您找到更好的解决方案，仍然欢迎 :-)

【讨论】：