skip to main content

HTMLCollection и NodeList

js

Кратко 🔗

HTMLCollection и NodeList — это очень похожие на массив коллекции. Они хранят элементы веб-страницы. К элементам коллекций можно обращаться по индексу, но у них нет привычных методов массива.

HTMLCollection возвращают методы getElementsByTagName и getElementsByClassName.

NodeList возвращает метод querySelectorAll.

Как понять 🔗

HTMLCollection возвращают методы, которые работают с DOM — представлением HTML-кода страницы в JavaScript.

Полученная один раз коллекция всегда остается актуальной — JavaScript будет обновлять ее в случае, если на странице появляется подходящий элемент. Поэтому HTMLCollection называют «живой» коллекцией.

Например, единожды получив коллекцию мы можем не заботиться о ее поддержке:

See the Pen xNOBow by Nikolai Lopin (@Lopinopulos) on CodePen.

NodeList работает так же, как и HTMLCollection. Разница только в том, что NodeList не живая коллекция — она не обновляется при появлении на странице новых элементов.

В работе 🔗

Николай,

🛠 Используй индексы для получения отдельных элементов коллекции:

let paragraphs = document.getElementsByTagName("p")
console.log(paragraphs[0])

🛠 Если нужно обойти все элементы в цикле, то можно написать классический цикл for:

let paragraphs = document.getElementsByTagName("p")
for (let i = 0; i < paragraphs.length; ++i) {
console.log(paragraphs[i].id) // печатаем значение атрибута id элемента
}

Другой вариант — воспользоваться синтаксисом for..of:

let paragraphs = document.getElementsByTagName("p")
for (let item of paragraphs) {
console.log(item.id)
}

🛠 Когда пишешь цикл с HTMLCollection убедись, что подходящие элементы не добавляются или удаляются со страницы в момент работы цикла. Так как коллекция живая, ее обновление во время цикла может создать бесконечный цикл.

🛠 Если очень нужны методы массива, то преобразуй HTMLCollection или NodeList в массив с помощью Array.from.

let paragraphs = document.getElementsByTagName("p")
let array = Array.from(paragraphs)

console.log(array.pop())

Такое преобразование обычно не требуется. Подумай, точно ли оно подходит под твою задачу.

Николай,