NodeList
NodeList — это массивоподобная коллекция (список) объектов Node.
Доступ к узлам в NodeList осуществляется по индексу (начинается с 0).
Свойство length возвращает количество узлов в NodeList.
NodeList или HTMLCollection
NodeList почти то же самое, что и HTMLCollection.
См. описание ниже.
Свойства и методы NodeList
В NodeList можно использовать следующие свойства и методы:
| Имя | Описание |
|---|---|
| entries() | Возвращает итератор с парами ключ/значение из списка. |
| forEach() | Выполняет функцию обратного вызова для каждого узла в списке |
| item() | Возвращает узел по указанному индексу |
| keys() | Возвращает итератор с ключами из списка |
| length | Возвращает количество узлов в NodeList |
| values() | Возвращает итератор со значениями из списка |
Выберите все узлы <p> в документе:
const myNodeList = document.querySelectorAll("p");
К элементам в NodeList можно получить доступ по индексному номеру.
Чтобы получить доступ ко второму узлу <p>, вы можете написать:
myNodeList[1]
Попробуйте сами »
Примечание:
Индекс начинается с 0.
HTML DOM Длина списка узлов
Свойство length определяет количество узлов в списке узлов:
myNodelist.length
Попробуйте сами »
Свойство length полезно, когда вы хотите выполнить цикл по узлам в списке узлов:
Измените цвет всех элементов <p> в списке узлов:
const myNodelist = document.querySelectorAll("p");
for (let i = 0; i < myNodelist.length; i++) {
myNodelist[i].style.color = "red";
}
Попробуйте сами »
Не массив
NodeList — это не массив!
NodeList может выглядеть как массив, но это не так.
Вы можете перебрать NodeList и ссылаться на его узлы с помощью индекса.
Но вы не можете использовать методы массива, такие как push(), pop() или join(), в NodeList.
Разница HTMLCollection и NodeList
NodeList и HTMLcollection — это практически одно и то же.
Оба — это массивоподобные коллекции (списки) узлов (элементов), извлеченных из документа. Доступ к узлам можно получить по индексным номерам. Индекс начинается с 0.
Оба имеют свойство length, которое возвращает количество элементов в списке (коллекции).
HTMLCollection — это коллекция элементов документа.
NodeList — это коллекция узлов документа (узлов элементов, узлов атрибутов и текстовых узлов).
Элементы HTMLCollection можно получить по имени, идентификатору или номеру индекса.
Элементы NodeList можно получить только по номеру индекса.
HTMLCollection всегда является живой коллекцией. Пример: если вы добавите элемент <li> в список в DOM, список в HTMLCollection также изменится.
NodeList чаще всего является статической коллекцией. Пример: если вы добавите элемент <li> в список в DOM, список в NodeList не изменится.
Методы getElementsByClassName() и getElementsByTagName() возвращают активную HTMLCollection.
Метод querySelectorAll() возвращает статический NodeList.
Свойство childNodes возвращает активный NodeList.
Активный NodeList
В некоторых случаях NodeList является активным: изменение в DOM обновляет NodeList.
Метод childNodes возвращает активный NodeList.