ОбъектNodeList — это коллекция узлов, возвращаемая такими методами, какNode.childNodes иdocument.querySelectorAll.

Свойства

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")); // добавляем новый divconsole.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"); // возвращает NodeListconst array1 = Array.from(list); // преобразует NodeList в Arrayconst array2 = [...list]; // преобразует NodeList в Array

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

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