css.in.ua
Підтримати

JS об'єкт NodeList

Введення до `NodeList`

NodeList - це об'єкт, що представляє собою колекцію вузлів, яку можна отримати за допомогою таких методів, як querySelectorAll. Важливо розуміти, що NodeList не є масивом, хоча і має певні подібні до масиву властивості, такі як доступ до елементів за індексом та властивість length.

Приклад 1: Отримання NodeList

let divs = document.querySelectorAll('div');
console.log(divs.length);

У цьому прикладі ми отримуємо всі елементи div на сторінці і виводимо їх кількість.

Робота з елементами NodeList

Ви можете перебирати елементи NodeList за допомогою циклу. Однак, відмінно від масивів, у NodeList немає методів, таких як forEach, map, але ви все одно можете використовувати їх, перетворивши NodeList на масив.

Приклад 2: Перебір NodeList

let paragraphs = document.querySelectorAll('p');

paragraphs.forEach(p => {
    p.style.color = 'red';
});

У цьому прикладі ми змінюємо колір тексту всіх параграфів на червоний. Оскільки forEach не є вбудованим методом NodeList, ми можемо користуватися ним безпосередньо.

Отримання вузлів за індексом

Оскільки NodeList має подібні до масиву характеристики, ви можете отримувати доступ до окремих вузлів за допомогою індексу. Наприклад, nodes[0] поверне перший вузол у списку.

Приклад 3:

let buttons = document.querySelectorAll('button');
let firstButton = buttons[0];
console.log(firstButton.textContent);

Тут ми отримуємо текст першої кнопки на сторінці.

Відмінність від HTMLCollection

Може виникнути замішання між NodeList та HTMLCollection. Основна відмінність полягає в тому, що NodeList може містити будь-який тип вузла, тоді як HTMLCollection містить лише елементи. Крім того, методи доступу різняться. Наприклад, NodeList, отриманий за допомогою querySelectorAll, не "живий", в той час як більшість HTMLCollection автоматично оновлюється при змінах у DOM.

Недоступні методи масиву

Помітимо, що хоча NodeList і має індексований доступ та властивість length, він не має багатьох інших методів масиву. Це може призвести до плутанини. Якщо вам потрібно використовувати такі методи, як map, filter або reduce, спочатку конвертуйте NodeList у масив.

Приклад 4:

let nodes = document.querySelectorAll('.item');
let nodeTexts = Array.from(nodes).map(node => node.textContent);

У цьому прикладі ми отримуємо текст з кожного вузла з класом 'item'.

Нотатка:

NodeList може бути "живим", тобто автоматично оновлюватися при змінах в DOM, або "мертвим", коли він не відображає зміни в DOM. Наприклад, колекції, отримані через querySelectorAll, є "мертвими".
Нотатка:

Багато новачків часто плутають NodeList із масивами через подібну структуру. Але важливо пам'ятати, що вам потрібно конвертувати NodeList в масив для використання більшості методів масиву.

Конвертація NodeList в масив

let nodes = document.querySelectorAll('.item');
let nodeArray = Array.from(nodes);

У цьому прикладі ми перетворюємо NodeList у масив для подальшого використання методів масиву.
Порада:

Не модифікуйте DOM під час ітерації. Якщо ви працюєте з "живим" NodeList, уникайте зміни DOM під час ітерації через список, оскільки це може призвести до непередбачуваних результатів.
Порада:

Пам'ятайте різницю між NodeList та HTMLCollection. Обидва ці об'єкти представляють колекції вузлів, але мають різниці у методах та властивостях. Звертайте увагу на те, який об'єкт ви використовуєте.
Порада:

Використовуйте Array.from() для конвертації. Якщо вам потрібно використовувати методи масиву, завжди конвертуйте NodeList в масив за допомогою Array.from().

Синтаксис

let nodes = document.querySelectorAll(selector);

Переглядачі

Переглядач

1

1

1

8

12
Переглядач

4.4

18

4

1
Переглядач

0.10.0

1.0

Приклади


У цьому прикладі ми використовуємо метод querySelectorAll для отримання всіх елементів зображення на веб-сторінці та виведення їх кількості в консоль. Це корисно, якщо ви хочете швидко перевірити, скільки зображень на вашій веб-сторінці.

let images = document.querySelectorAll('img');
console.log(`На сторінці ${images.length} зображень.`);

Тут ми шукаємо всі елементи з класом 'highlight' і змінюємо колір їх тексту на червоний. Це корисно, коли потрібно виконати стилізацію для групи елементів на основі їх класу або інших атрибутів.

let highlightedText = document.querySelectorAll('.highlight');
highlightedText.forEach(element => {
    element.style.color = 'red';
});

У цьому прикладі ми спочатку отримуємо всі посилання на сторінці, потім перетворюємо NodeList у масив. Після цього фільтруємо посилання, щоб залишити тільки ті, що починаються з 'https://', і створюємо новий масив із цих URL-адрес. Це може бути корисно, якщо ви хочете працювати тільки з безпечними посиланнями або проводити іншу специфічну обробку.

let links = document.querySelectorAll('a');
let hrefs = Array.from(links).filter(link => link.href.startsWith('https://')).map(link => link.href);
console.log(hrefs);

Методи

keys()
Повертає ітератор для індексів у NodeList.
values()
Повертає значення у NodeList як ітератор.
entries()
Повертає об'єкт ітератора.
forEach()
Виконує задану функцію для кожного елемента NodeList.
item()
Повертає елемент з NodeList за вказаним індексом.

Властивості

length
Вказує кількість елементів у NodeList.

Спільнота

Зв'язок