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
NodeList і HTMLCollection — це майже те саме.
Обидва є масивоподібними колекціями (списками) вузлів (елементів), витягнутих із документа. До вузлів можна отримати доступ за номерами індексів. Індекс починається з 0.
Обидва мають властивість length, яка повертає кількість елементів у списку (колекції).
HTMLCollection — це колекція елементів документа.
NodeList — це набір вузлів документа (вузли елементів, вузли атрибутів і текстові вузли).
До елементів HTMLCollection можна отримати доступ за їх іменем, ідентифікатором або номером індексу.
До елементів NodeList можна отримати доступ лише за їхнім номером індексу.
HTMLCollection завжди є активною колекцією. Приклад: якщо додати <li> до списку в DOM, список у HTMLCollection також зміниться.
NodeList найчастіше є статичною колекцією. Приклад: якщо додати <li> до списку в DOM, список у NodeList не зміниться.
Методи getElementsByClassName() та getElementsByTagName() повертають живу HTMLCollection.
Метод querySelectorAll() повертає статичний NodeList.
Властивість childNodes повертає активний NodeList.
Не масив!
NodeList може виглядати як масив, але це не так.
Ви можете прокрутити NodeList і посилатися на його вузли за індексом.
Але ви не можете використовувати такі методи масиву, як push(), pop() або join() у NodeList.
