JS метод NodeList.keys()
Загальний опис
keys() - це вбудований метод об'єкта NodeList в JavaScript, який повертає новий ітераційний об'єкт типу Iterator, що містить пари ключ/значення для кожного вузла в колекції NodeList. Ключами в цьому випадку є числові індекси вузлів, а значеннями - самі вузли. Цей метод є особливо корисним для ітерації над колекцією NodeList за допомогою циклів for...of або розповсюдження в масиви та інші ітеровані структури даних.
Розглянемо базове використання NodeList.keys() на прикладі. Нехай у нас є проста HTML-розмітка з кількома елементами <div>:
<div id="container">
<div>Елемент 1</div>
<div>Елемент 2</div>
<div>Елемент 3</div>
</div>
Ми можемо отримати колекцію NodeList елементів <div> всередині контейнера та використати keys() для ітерації:
const container = document.getElementById('container');
const divs = container.querySelectorAll('div');
for (const key of divs.keys()) {
console.log(`Індекс: ${key}, Вузол: ${divs[key].textContent}`);
}
Це виведе:
Індекс: 0, Вузол: Елемент 1
Індекс: 1, Вузол: Елемент 2
Індекс: 2, Вузол: Елемент 3
Як бачимо, keys() повертає ітератор з індексами елементів у NodeList, що дозволяє нам отримати доступ до самих вузлів за допомогою цих індексів.
Метод keys() також корисний для перетворення NodeList на масив за допомогою розповсюдження або методу Array.from():
const divArray = Array.from(divs.keys(), key => divs[key]);
// або
const divArray = [...divs.keys()].map(key => divs[key]);
Тут ми створюємо новий масив divArray, який містить ті ж самі вузли, що й вихідна колекція divs, але вже у форматі масиву, що надає більше можливостей для подальшої обробки.
Крім того, NodeList.keys() можна використовувати в поєднанні з методами entries() та values() для більш гнучкої ітерації над колекцією вузлів. Наприклад:
for (const [key, value] of divs.entries()) {
console.log(`Індекс: ${key}, Вузол: ${value.textContent}`);
}
Це дає такий самий результат, як і в першому прикладі, але тут ми розпаковуємо пари ключ/значення з ітератора entries() безпосередньо в циклі.
Отже, NodeList.keys() є потужним інструментом для ітерації та обробки колекцій вузлів у JavaScript, надаючи зручний спосіб отримання індексів вузлів та їх подальшого використання в різноманітних сценаріях.
| Порада: | Комбінуйте |
| Порада: | Використовуйте |
| Порада: | Пам'ятайте, що |
Синтаксис
NodeList.keys()Параметри
Return
iteratorПовертає ітератор для ключів у
NodeList, який містить індекси всіх елементів у списку.
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
51 |
50 |
10 |
38 |
16 |
| Переглядач | ||||
|---|---|---|---|---|
51 |
51 |
50 |
10 |
| Переглядач | ||
|---|---|---|
- |
- |
Приклади
У цьому прикладі ми маємо невпорядкований список (ul) з трьома елементами (li). При натисканні на кнопку "Показати ключі" викликається функція showKeys(), яка отримує NodeList дочірніх елементів списку за допомогою list.children. Потім ми перетворюємо NodeList на масив за допомогою Array.from() і застосовуємо метод keys() до цього масиву, щоб отримати ітератор з ключами елементів.
Ітератор проходиться за допомогою циклу for...of, і ключі виводяться в елемент <p> з ідентифікатором output. Таким чином, користувач може наочно побачити ключі елементів списку, які є просто їхніми індексами у NodeList.
Цей приклад демонструє, як можна використовувати метод keys() для отримання ключів елементів NodeList, що може бути корисним у різних сценаріях обробки вузлів DOM.
Цей приклад демонструє базове використання keys() для отримання індексів елементів у колекції NodeList. Ми отримуємо колекцію елементів <li> за допомогою querySelectorAll(), а потім використовуємо цикл for...of з keys() для ітерації над індексами. Для кожного індексу key ми отримуємо відповідний елемент items[key] та виводимо його текстовий вміст разом з індексом.
// Отримуємо колекцію елементів списку
const items = document.querySelectorAll('li');
// Ітеруємо над колекцією за допомогою keys()
for (const key of items.keys()) {
const item = items[key];
console.log(`Елемент ${key}: ${item.textContent}`);
}У цьому прикладі ми використовуємо NodeList.keys() разом з entries() та map() для створення масиву об'єктів, що представляють посилання на веб-сторінці, з їхніми індексами та текстовим вмістом.
// Отримуємо колекцію посилань
const links = document.querySelectorAll('a');
// Створюємо масив об'єктів з індексами та текстом посилань
const linkData = [...links.entries()].map(([key, link]) => ({
index: key,
text: link.textContent,
href: link.href
}));
// Виводимо дані про посилання
linkData.forEach(linkObj => {
console.log(`Посилання ${linkObj.index}: ${linkObj.text} (${linkObj.href})`);
});