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