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

Синтаксис

let nodes = document.querySelectorAll(selector);

Переглядачі

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

Приклади

• Приклад 1
• Приклад 2
• Приклад 3

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

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

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.