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

Question

I have the following markup:

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

How can I check if a div in the DOM has a class name that contains the text hidden? The desired output would be true for the above code.

Here is what I have so far, but this only checks for the third div in the example above:

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

I would like to check for both the third and first div -- any div that contains a class name with the text hidden.

Answer 1

You can use .querySelectorAll() and attribute contains selector, check the .length of the returned NodeList and use !! operator to get a Boolean value

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>