влиять на все узлы с общим классом

Question

У меня есть страница с элементами div, каждый из которых имеет несколько классов.

<div class='publication parent20'></div>
<div class='publication parent12 parent42 parent91'></div>
<div class='publication parent20'></div>
<div class='publication parent32 parent23'></div>

Мне нужна функция, которая принимает класс, переданный ей как переменную, устанавливает для них стиль всех элементов div с классом публикации равным none, а затем устанавливает теги с указанным классом.

function swap_pub(pub){
  document.getElementById("publication").style.display = "none";
  //set style.display = "block" to all elements with class = pub

} 

любые мысли о том, как я это сделаю.

Answer 1

Использование getElementsByClassName() ^MDN

var pubs = document.getElementsByClassName('publication'); // a NodeList

for (var i = 0; i < pubs.length; i++) {
    pubs[i].style.display = 'block';
}

Вот как это выглядит при использовании jQuery:

$('.publication').show(); // concise

Answer 2

Существует также querySelectorAll, который немного более широко поддерживается, чем getElementsByClassName.

function setDisplay(className, display) {
    var items = document.querySelectorAll('.' + className); 
    var i = items.length;
    while (i--) {
      items[i].style.display = display;
    }
}