NodeList

Свойства

length

Количество элементов в NodeList.

Методы

item (index)

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

entries()

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

forEach()

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

keys()

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

values()

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

Описание

Динамическая коллекция

В определённых случаях NodeList может являться динамической коллекцией. Это означает, что любые изменения в DOM тут же отражаются на коллекции. Примером подобной коллекции является Node.childNodes:

const parent = document.getElementById("parent");
const childNodes = parent.childNodes;
console.log(childNodes.length); // пусть равно "2"
parent.appendChild(document.createElement("div")); // добавляем новый div
console.log(childNodes.length); // выведет "3"

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

Данное деление необходимо иметь в виду при выборе способа обхода элементов NodeList, а также сохранении длины списка в переменную.

Отличия NodeList от Array

NodeList используется подобно массивам, и потому может возникнуть закономерное желание использовать в нём методы, предоставляемые Array.prototype. Однако NodeList не реализует методы, подобные таковым у Array.

В JavaScript существует механизм наследования, основанный на прототипах, применяемый как к встроенным («native») (таким как Array), так и «host»-объектам, предоставляемым средой исполнения (таким как NodeList) . Экземпляры класса Array получают свои методы (к примеру, forEach и map) из следующей цепочки наследования:

myArray --> Array.prototype --> Object.prototype --> null (Цепочка прототипов объекта может быть получена рекурсивным вызовом Object.getPrototypeOf)

forEach, map, ровно как и все остальные свойства принадлежат Array.prototype.

Цепочка же прототипов NodeList выглядит следующим образом:

myNodeList --> NodeList.prototype --> Object.prototype --> null

NodeList.prototype содержит методы forEach, item, но никак не остальные методы Array.prototype, поэтому они и не могут быть использованы с NodeLists.

Пример

Элементы в NodeList, можно обработать следующим образом:

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

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

Циклы for...of корректно перечисляют все объекты внутри NodeList :

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

Конвертирование NodeList в Array

Иногда удобнее работать с содержимым NodeList, используя методы Array. Ниже приведены способы преобразования NodeList к Array:

const list = document.querySelectorAll("div"); // возвращает NodeList
const array1 = Array.from(list); // преобразует NodeList в Array
const array2 = [...list]; // преобразует NodeList в Array

Спецификации

Совместимость с браузерами