如何检查 DOM 中所有 div 的类名是不是具有带有 vanilla Javascript 的特定字符串？

Posted 2023-03-16

【中文标题】如何检查 DOM 中所有 div 的类名是不是具有带有 vanilla Javascript 的特定字符串？

【英文标题】：How to check if all class names of divs in the DOM have a specific string with vanilla Javascript?如何检查 DOM 中所有 div 的类名是否具有带有 vanilla Javascript 的特定字符串？

【发布时间】：2018-04-15 08:48:38

【问题描述】：

我有以下标记：

<div id="app">
  <div class="1hidden1></div>
  <div class="123"></div>
  <div class="hidden"></div>
</div>

如何检查 DOM 中的 div 是否具有包含文本 hidden 的类名？上述代码所需的输出为true。

这是我目前所拥有的，但这仅检查上面示例中的第三个 div：

if (document.getElementById('app').classList.contains('hidden')) 
  // this does not select the first div within #app

我想检查第三个和第一个 div —— 任何包含带有文本 hidden 的类名的 div。

【问题讨论】：

考虑使用GetElementsByTag var divs = document.getElementsByTagName('div');

【参考方案1】：

您可以使用.querySelectorAll() 并且属性包含选择器，检查返回的NodeList 的.length 并使用!! 运算符获取Boolean 值

var hidden = document.querySelectorAll("#app [class*='hidden']");

console.log(!!hidden.length, hidden);

<div id="app">
  <div class="1hidden1"></div>
  <div class="123"></div>
  <div class="hidden"></div>
</div>

【参考方案2】：

通过使用普通的javascript，您可以使用getElementsByTagName，然后对于找到的每个div，您可以检查相应的className

您可以在此处查看 JSFiddle：

var divs = document.getElementsByTagName("div");
for (i = 0, len = divs.length, text = ""; i < len; i++)  
    console.log(divs[i].className);

https://jsfiddle.net/dttw8fcb/

【讨论】：

Answer 中的代码如何检查元素 class 值内的特定文本？

我已经打印了类名，如果对于任何特定的类需要执行任何特定的任务，那么可以在for循环本身中添加一个if检查