Есть ли более эффективный способ управления элементами CSS с помощью JavaScript

Question

Я уже решил это, но мне было просто интересно, есть ли более эффективный способ написания кода

function p(){
    document.getElementById("boom").style.display = "block";
    document.getElementById("boom1").style.display = "block";
    document.getElementById("boom2").style.display = "block";
    document.getElementById("boom3").style.display = "block";
}
p();

Результат - это то, что я ожидал, но мне было просто интересно, есть ли более простой способнаписать это

Answer 1

Вы можете использовать общий класс для всех элементов, чтобы сгруппировать их (или использовать комбинированный селектор), а затем получить все элементы, используя querySelectorAll (или getElementsByClassName при использовании общего класса)метод и для итерации по возвращенной коллекции NodeList используйте NodeList#forEach метод ( polyfill для более старого браузера ).

function p(){
    document.querySelectorAll(".common-class").forEach(ele => ele.style.display = "block");
    // or .forEach(({style}) => style.display = "block");
}

p();

function p() {
  var all = document.querySelectorAll(".common-class");
  all.forEach(({ style }) => style.display = "block");
}
p();

div {
  display: none
}

<div id="boom" class="common-class">boom</div>
<div id="boom1" class="common-class">boom1</div>
<div id="boom2" class="common-class">boom2</div>
<div id="boom3" class="common-class">boom3</div>