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