Список узлов JavaScript HTML DOM

NodeListОбъект — это список узлов (коллекция), полученный из документа.

Объект NodeList похож наHTMLCollectionобъект.

Некоторые методы в старых браузерах (такие как:getElementsByClassName()) возвращают объект NodeList, а не объект HTMLCollection.

Во всех браузерах свойствоchildNodesвозвращает объект NodeList.

В большинстве браузеровquerySelectorAll()возвращает объект NodeList.

Следующий код выбирает все узлы <p> в документе:

Примеры

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

Доступ к элементам в NodeList можно получить по индексу (начиная с 0).

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

y = myNodeList[1];

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

Свойство length объекта NodeList

Свойство length объекта NodeList определяет количество элементов в списке узлов.

Примеры

var myNodelist = document.querySelectorAll("p"); document.getElementById("demo").innerHTML = myNodelist.length;

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

Разбор примера

Получить коллекцию элементов <p>:

var myNodelist = document.querySelectorAll("p");

Отобразить количество элементов в списке узлов:

document.getElementById("demo").innerHTML = myNodelist.length;

Свойство length часто используется для перебора списка узлов.

Примеры

Измените цвет фона всех элементов <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 имеют много общего.

Как NodeList, так и HTMLCollection несколько похожи на объекты Array, и можно использовать индекс (0, 1, 2, 3, 4, ...) для получения элементов.

И NodeList, и HTMLCollection имеют свойство length.

Элементы HTMLCollection можно получить по имени, id или индексу.

Доступ к NodeList возможен только по индексу.

Только объекты NodeList содержат узлы атрибутов и текстовые узлы.

Список узлов — это не массив!

Список узлов может выглядеть как массив, но он не является массивом.

Вы можете использовать индекс для получения элементов так же, как в массиве.

Списки узлов не могут использовать методы массивов: valueOf(), pop(), push() или join().

Другие расширения