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 — 任何包含类名和文本的 div hidden。

score 2 · Accepted Answer

您可以使用.querySelectorAll()和属性包含选择器，检查.length返回NodeList并使用!!运算符获取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>

score 1 · Accepted Answer

通过使用普通的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);
}

2 回答 2