如何检查 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');

标签： javascript html getelementbyid classname class-names

【解决方案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检查