Главная > Блог > Web-разработка > JavaScript и TypeScript >

JavaScript. HTMLCollection и NodeList

17.04.2022

Теги: DOM • Frontend • HTML • JavaScript • Web-разработка • Документ • Коллекция

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

HTMLCollection возвращают методы getElementsByTagName, getElementsByClassName и свойство children
NodeList возвращают методы querySelectorAll, getElementsByName и свойство childNodes

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

NodeList может быть не только «живой» коллекцией, но и статической. Такая коллекция не обновляется при появлении на странице новых элементов. «Живой» NodeList возвращают метод getElementsByName и свойство childNodes. Метод querySelectorAll возвращает статический NodeList.

Для получения отдельных элементов коллекции можно использовать индексы:

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

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

let paragraphs = document.getElementsByTagName('p')
for (let i = 0; i < paragraphs.length; ++i) {
    console.log(paragraphs[i].id)
}

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())

Методы HTMLCollection

HTMLCollection.item(index). Возвращает узел с порядковым номером index, отсчёт ведётся от нуля. Возвращает null, если index выходит за границы допустимого диапазона.

HTMLCollection.namedItem(name). Возвращает узел, идентификатор или имя (в целях совместимости) которого совпадает со строкой, переданной в аргументе. Соответствие имени проверяется в самую последнюю очередь, только для HTML-элементов и только для тех из них, которые поддерживают свойство name. Возвращает null, если искомый элемент отсутствует.

Методы NodeList

NodeList.item(index). Возвращает элемент из списка по его индексу или null, если индекс выходит за границы допустимого диапазона. Может быть использован как альтернатива nodeList[index], возвращающему undefined при недопустимом index.

NodeList.entries(). Возвращает iterator, позволяя перебрать все пары ключ/значение, содержащиеся в NodeList.

NodeList.forEach(). Выполняет указанную функцию один раз для каждого элемента NodeList.

NodeList.keys(). Возвращает iterator, позволяя перебрать все ключи каждой пары ключ/значение, содержащейся в NodeList.

NodeList.values(). Возвращает iterator, позволяя перебрать все значения каждой пары ключ/значение, содержащейся в NodeList.

Поиск: DOM • Frontend • HTML • JavaScript • Коллекция • Web-разработка • HTMLCollection • NodeList