如何检查 DOM 中 div 的所有 class 名称是否具有带有原版 Javascript 的特定字符串？

Question

我有以下标记：

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

如何检查 DOM 中的 div 是否有包含文本 hidden 的 class 名称？对于上述代码，所需的输出将是 true。

这是我目前的情况，但这只检查上面示例中的第三个 div：

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

我想检查第三个和第一个 div -- 任何包含 class 名称和文本 hidden.[=18 的 div =]

Answer 1

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

您可以在此处查看 JSFiddle：

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

Answer 2

您可以使用 .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>

How to check if all class names of divs in the DOM have a specific string with vanilla Javascript?