Читайте в большом количестве элементов из DOM

Question

Я знаю основы JS, но я хотел бы сделать следующий шаг.

Я хотел бы сменить CSS с помощью JS на множество элементов. Проблема заключается в том, что единственный метод, который я знаю, чтобы выбрать элементы является

const name = document.getElement...(id/class/tag etc.); 

Так что я могу в дальнейшем обращаться к этому элементу по его имени и изменить свой стиль с помощью:

name.style.cssproperty = "something"; 

И это хорошо , но когда у меня уже есть 10 элементов, я чувствую, что это очень неэффективно.

Так что мой вопрос, есть ли лучший способ более эффективно изменить CSS динамически, так что начало моего кода не выглядеть следующим образом:

const name = document.getElement...(id/class/tag etc.); 
const name = document.getElement...(id/class/tag etc.); 
const name = document.getElement...(id/class/tag etc.); 
const name = document.getElement...(id/class/tag etc.); 
const name = document.getElement...(id/class/tag etc.); 
etc... 

Или это нормально, чтобы иметь так много переменных ?

Надеюсь, мой вопрос можно понять.

PS:

Я только начал изучать Modular JavaScript! Это какая-то помощь моей проблеме?

Answer 1

Вы можете получить все элементы с помощью данного класса:

const elements = document.querySelectorAll('my-class'); 

Теперь вы можете перебрать принесенных элементов:

for (var i = 0; i < elements.length; i++) { 
    elements[i].style.cssproperty = "something"; 
} 

Или, если ES6 + доступен в вашей среде:

elements.forEach(element => element.style.cssproperty = "something");