NodeList

NodeList — это коллекции узлов, обычно возвращаемые такими свойствами, как Node.childNodes, и методами, такими как document.querySelectorAll().

Этот интерфейс был попыткой создать неизменяемый список и продолжает поддерживаться только для того, чтобы не сломать код, который его уже использует. Современные API представляют структуры списков с помощью типов, основанных на JavaScript-массивах, что делает доступными многие методы массивов и в то же время накладывает дополнительные семантические ограничения на их использование (например, делает их элементы неизменяемыми).

Эти исторические причины не означают, что вам, как разработчику, следует избегать NodeList. Вы сами не создаёте NodeList объекты, но получаете их из API, таких как Document.querySelectorAll(), и эти API не устарели. Однако будьте внимательны к семантическим различиям от реального массива.

Хотя NodeList не является Array, можно перебирать его с помощью forEach(). Его также можно преобразовать в настоящий Array с помощью Array.from().

Хотя оба считаются NodeList объектами, существуют два типа списков узлов: живые и статические.

В некоторых случаях NodeList является живым, что означает, что изменения в DOM автоматически обновляют коллекцию.

Например, Node.childNodes является живым:

const parent = document.getElementById("parent");
let childNodes = parent.childNodes;
console.log(childNodes.length); // let's assume "2"
parent.appendChild(document.createElement("div"));
console.log(childNodes.length); // outputs "3"

В других случаях NodeList является статическим, где любые изменения в DOM не влияют на содержимое коллекции. Универсальный метод document.querySelectorAll() возвращает статический NodeList.

Важно помнить об этом различии, когда вы выбираете способ перебора элементов в NodeList, и следует ли кэшировать length списка.

NodeList.length Только для чтения

Количество узлов в NodeList.

NodeList.item()

Возвращает элемент в списке по его индексу или null , если индекс вне границ.

Альтернатива доступу к nodeList[i] (которая вместо этого возвращает undefined , если i находится вне границ). Это полезно в основном для не-JavaScript реализаций DOM.

NodeList.entries()

Возвращает iterator, позволяющий коду пройтись по всем парам ключ/значение, содержащимся в коллекции. (В данном случае ключи — целые числа, начинающиеся с 0, а значения — узлы.)

NodeList.forEach()

Выполняет предоставленную функцию один раз для каждого элемента NodeList , передавая элемент в качестве аргумента функции.

NodeList.keys()

Возвращает iterator, позволяющий коду пройтись по всем ключам пар ключ/значение, содержащимся в коллекции. (В данном случае ключи — целые числа, начинающиеся с 0.)

NodeList.values()

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

Можно перебрать элементы в NodeList с помощью цикла for:

for (let i = 0; i < myNodeList.length; i++) {
  let item = myNodeList[i];
}

Не используйте for...in для перечисления элементов в NodeList, так как они также перечисляют его свойства length и item и вызовут ошибки, если ваш скрипт предполагает, что он имеет дело только с объектами element. Кроме того, for...in не гарантируется, что он будет посещать свойства в определённом порядке.

for...of циклы правильно перебирают NodeList объекты:

const list = document.querySelectorAll("input[type=checkbox]");
for (const checkbox of list) {
  checkbox.checked = true;
}

Браузеры также поддерживают метод итератора (forEach()), а также entries(), values() и keys().