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

Question

我有以下标记:

<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。

Answer 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>