JavaScript HTML DOM Список узлов
Объект HTML DOM NodeList
Объект NodeList - это список (набор) узлов, извлеченных из документа.
Объект NodeList почти такой же, как объект HTMLCollection.
Некоторые (более старые) браузеры возвращают объект NodeList вместо HTMLCollection для таких методов, как getElementsByClassName().
Все браузеры возвращают объект NodeList для свойства childNodes.
Большинство браузеров возвращают объект NodeList для метода querySelectorAll().
Следующий код выбирает все узлы <p> в документе:
Пример
const myNodeList = document.querySelectorAll("p");
Доступ к элементам в NodeList можно получить по порядковому номеру.
Чтобы получить доступ ко второму узлу <p>, можно написать:
myNodeList[1]
Попробуйте сами »
Примечание: Индекс начинается с 0.
Длина списка узлов HTML DOM
Свойство length определяет количество узлов в списке узлов:
Свойство length полезно, когда вы хотите перебрать узлы в списке узлов:
Пример
Изменить цвет всех элементов <p> в списке узлов:
const myNodelist = document.querySelectorAll("p");
for (let i = 0; i < myNodelist.length; i++) {
myNodelist[i].style.color = "red";
}
Попробуйте сами »
Различия между HTMLCollection и NodeList
HTMLCollection (предыдущая глава) - это набор элементов HTML.
NodeList представляет собой набор узлов документа.
NodeList и коллекция HTML - это во многом одно и то же.
И объект HTMLCollection, и объект NodeList представляют собой список (коллекцию) объектов в виде массива.
У обоих есть свойство length, определяющее количество элементов в списке (коллекции).
Оба предоставляют индекс (0, 1, 2, 3, 4, ...) для доступа к каждому элементу как к массиву.
Доступ к элементам HTMLCollection можно получить по их имени, идентификатору или номеру индекса.
Доступ к элементам NodeList можно получить только по их порядковому номеру.
Только объект NodeList может содержать узлы атрибутов и текстовые узлы.
Список узлов - это не массив!
Список узлов может выглядеть как массив, но это не так.
Вы можете прокручивать список узлов и обращаться к его узлам как к массиву.
Однако вы не можете использовать методы массива, такие как valueOf(), push(), pop() или join() в списке узлов.
