Не получается перебрать коллекцию в JS

Question

Выполняю поиск через getElementByTagName('div') после чего пытаюсь перебрать с помощью forEach и добавить padding, но выдает ошибку.

В чем проблема, как правильно перебирать ?

'use strict'

let allDiv = document.getElementsByTagName('div')
console.log(allDiv)

allDiv.forEach(element => {
  element.setAttribute('style', 'padding: 10px;')
});

<div></div>
<div></div>
<div></div>
<div></div>

Answer 1

JavaScript имеет несколько типов коллекций (HTMLCollection, NodeList, FileList, 'arguments' и пр.). getElementsByTagName возвращает живую коллекцию элементов HTMLCollection. У коллекции данного типа нет метода forEach. Поэтому надо принудительно перевести в массив например через Array.from

Метод Array.from() создаёт новый экземпляр Array из массивоподобного или итерируемого объекта, коим является HTMLCollection

let allDiv = document.getElementsByTagName('div')


Array.from(allDiv).forEach(element => {
  element.setAttribute('style', 'padding: 10px;')
});

<div>1</div>
<div>2</div>
<div>3</div>

БЛОГ НА HUSL

Не получается перебрать коллекцию в JS

Ответы (1 шт):