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

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() з методами entries() та values() для отримання більш гнучкого контролю над ітерацією. entries() дозволяє отримувати пари ключ/значення, а values() - лише значення (вузли) з колекції:

const links = document.querySelectorAll('a');
for (const [key, link] of links.entries()) {
  console.log(`Посилання ${key}: ${link.href}`);
}
Порада:

Використовуйте NodeList.keys() разом з методом Array.from() або розповсюдженням для перетворення колекції NodeList на масив. Це дозволить вам застосовувати різноманітні методи масивів для подальшої обробки вузлів:

const divArray = Array.from(divs.keys(), key => divs[key]);
// або
const divArray = [...divs.keys()].map(key => divs[key]);
Порада:

Пам'ятайте, що NodeList.keys() повертає ітератор, який можна використовувати лише один раз. Якщо вам потрібно повторно ітерувати колекцію, створюйте новий ітератор або зберігайте результат попередньої ітерації в масив або інший ітерований об'єкт.

Синтаксис

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})`);
});

Спільнота

Зв'язок