Как проверить, имеют ли все имена классов div в DOM конкретную строку с ванильным Javascript?

Question

У меня есть следующая разметка:

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

Как я могу проверить, есть ли у div в DOM имя класса, содержащее текст hidden? Желаемый результат будет true для приведенного выше кода.

Вот что у меня пока есть, но это проверяет только третий div в приведенном выше примере:

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

Я хотел бы проверить и третий и первый div - любой div, который содержит имя класса с текстом hidden,

Answer 1

Ты можешь использовать .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>

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