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'.

правити

Порада

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

автор: Bond правити

Порада

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

автор: Bond правити

Порада

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

автор: Bond правити

Нотатка

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

автор: Bond правити

Нотатка

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

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

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

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

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

let nodes = document.querySelectorAll(selector);

методи

властивості

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	1	8	12	5

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	1

Приклади

+ запропонувати свій приклад у пісочниці

<img src="/img/logo.svg" width="100" alt="Демо">

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

<div class="highlight">перший елемент highlight</div>
<div class="highlight">другий елемент highlight</div>

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

<a href="#demo">перше посилання</a>
<a href="#demo2">друге посилання</a>

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