Руководство по NodeList HTML DOM

NodeList

NodeList - это набор аналогичных массиву объектов узлов (списков).

Узлы в NodeList можно получить через индекс (начиная с 0).

Атрибут lengthВернуть количество узлов в NodeList.

NodeList vs. HTMLCollection

NodeList с HTMLCollection Почти так же.

См. описание ниже страницы.

Кто возвращает NodeList?

Свойство childNodes

Метод querySelectorAll()

Метод getElementsByName()

Свойства и методы

Следующие свойства и методы можно использовать на NodeList:

Название Описание
entries() Вернуть итератор с парами ключ/значение из списка.
forEach() Выполнить回调-функцию для каждого узла в списке.
item() Вернуть узел по заданному индексу.
keys() Использовать итератор с помощью ключей из списка.
length Вернуть количество узлов в NodeList.
values() Вернуть итератор с помощью значений из списка.

экземпляры

Выбрать все <p> Узел:

const myNodeList = document.querySelectorAll("p");

Элементы NodeList можно получить через индекс.

Чтобы получить доступ ко второму узлу <p>, вы можете написать:

myNodeList[1]

Попробуйте сами

Внимание:Индекс начинается с 0.

Длина списка узлов HTML DOM

length Эта функция определяет количество узлов в списке узлов:

Пример 1

myNodelist.length

Попробуйте сами

Когда вы хотите итерировать узлы в списке узлов:length Эта функция очень полезна:

Пример 2

Изменить цвет всех элементов <p> в списке узлов:

const myNodelist = document.querySelectorAll("p");
for (let i = 0; i < myNodelist.length; i++) {
  myNodelist[i].style.color = "red";
}

Попробуйте сами

Не массив

NodeList не массив!

NodeList может выглядеть как массив, но на самом деле это не так.

Вы можете пройтись по NodeList и использовать индекс для доступа к его узлам.

Но вы не можете использовать методы массива на NodeList, такие как push()、pop() или join().

Разница между HTMLCollection и NodeList

NodeList с HTMLcollection очень похожи.

Они оба представляют собой аналогичные массиву коллекции (списка) узлов (элементов), извлеченных из документа. Узлы можно доступа через индекс. Начало индекса 0.

У них есть Атрибут lengthон возвращает количество элементов (сборников) в списке (коллекции).

HTMLCollection являетсяЭлемент документасборником.

NodeList являетсяузел документаСборник (узел элемента, узел атрибута и узел текста).

Элементы HTMLCollection можно доступа через их имя, id или индекс.

Элементы NodeList можно доступа только через их индекс.

HTMLCollection всегда являетсяТекущийколлекцией. Например: если добавить элемент <li> в список DOM, то список в HTMLCollection также изменится.

NodeList обычно являетсяСтатическийКоллекция. Например: если добавить элемент <li> в список DOM, то список в NodeList не изменится.

getElementsByClassName() и getElementsByTagName() Метод возвращает текущий HTMLCollection.

querySelectorAll() Метод возвращает статический NodeList.

childNodes Свойство возвращает текущий NodeList.

текущим списком узлов

В некоторых случаях NodeList являетсяТекущий：Изменения в DOM обновляют NodeList.

childNodes Метод возвращает текущий NodeList.