Как сделать переборку по классам?

Question

[ICE777]

<span class="allow"> 1 </span>
<span class="allow"> 2 </span>
<span class="allow"> 3 </span>
<span class="allow"> 4 </span>
<span class="deny"> 5 </span>

var d = document.getElementsByClassName("allow");
d.forEach((e) => {
e.style = "backgound: red;"
})

Как изменить свойство элементов через класс? А то у меня ошибка что функции нету хоть foreach как бы функция я не понимаю как решить это.
Пожалуйста на js покажите.

Comments

[Ярослав Иванов]

document.querySelectorAll(".allow")

Answer 1

[Роман Якимчук]

У вас HTMLCollection, а не массив, поэтому forEach нет.

Два варианта:
1. [...document.getElementsByClassName("allow")] для перевода в массив, и далее делаете forEach
2. Если не нужна Live-коллекция элементов, используйте querySelectorAll чтобы найти элементы

Вариант №2 обычно предпочтительнее.

И, не меняйте всё свойство style, а лишь нужный стиль:
e.style.background = 'red';

Поэтому если записать всё максимально коротко, то:

[...document.querySelectorAll('.allow')].forEach(element => {
  element.style.background = 'red';
});

Comments

[Герман Зуяков]

Плохой пример, ибо querySelectorAll находится в процесе удаления из браузеров

[Gary_Ihar]

Герман Зуяков, а где про эту инфу почитать?

[Герман Зуяков]

Gary_Ihar, Извиняюсь перепутал с другим методом

Answer 2

[Герман Зуяков]

Тут всё подробно описанно