JS метод DOMTokenList.keys()

Загальний опис

Метод keys() об'єкта DOMTokenList є важливим інструментом для роботи з набором токенів у JavaScript. Основна функція цього методу полягає у поверненні нового ітератора, який містить ключі для кожного індексу в DOMTokenList. Ключі, в даному випадку, являють собою числові індекси, які відповідають порядковим номерам елементів в об'єкті DOMTokenList. Цей метод є корисним при необхідності перебирання елементів класів, атрибутів, або інших колекцій токенів, що дозволяє програмістам більш ефективно управляти DOM-елементами на веб-сторінці.

Для початку, розглянемо базове використання методу keys(). Припустимо, що у нас є HTML-елемент з декількома класами:

<div id="myElement" class="class1 class2 class3"></div>

Ми можемо отримати доступ до класів цього елемента за допомогою JavaScript, використовуючи об'єкт classList, і потім застосувати метод keys() для отримання ітератора ключів:

const element = document.getElementById('myElement');
const classList = element.classList;
const keysIterator = classList.keys();

for (let key of keysIterator) {
    console.log(key);
}

У цьому прикладі keysIterator містить ключі (індекси) для класів в classList. Цикл for...of перебирає ці ключі, виводячи кожен з них в консоль. Вивід буде виглядати наступним чином:

0
1
2

Це показує, що класи зберігаються у вигляді списку, і метод keys() дозволяє отримати доступ до їхніх індексів.

Детальніше розглянемо застосування методу keys() у поєднанні з іншими методами об'єкта DOMTokenList, такими як item() і contains(). Метод item() дозволяє отримати клас за його індексом, а метод contains() перевіряє наявність певного класу в списку класів. Поєднуючи ці методи, можна створити більш складні логічні конструкції.

Розглянемо приклад, де ми ітеруємося по класам елемента і перевіряємо, чи містять вони певний підрядок:

const element = document.getElementById('myElement');
const classList = element.classList;
const keysIterator = classList.keys();
const substring = 'class';

for (let key of keysIterator) {
    const className = classList.item(key);
    if (className.includes(substring)) {
        console.log(`Клас "${className}" містить підрядок "${substring}".`);
    }
}

У цьому прикладі ми отримуємо кожен клас за його індексом, перевіряємо, чи містить він підрядок substring, і, якщо так, виводимо відповідне повідомлення. Це демонструє, як метод keys() можна використовувати для виконання складніших перевірок і маніпуляцій з класами елементів.

Метод keys() також може бути корисним у випадках, коли потрібно змінити або видалити класи на основі їхніх індексів. Наприклад, можна видаляти кожен другий клас з списку класів елемента:

const element = document.getElementById('myElement');
const classList = element.classList;
const keysIterator = classList.keys();

for (let key of keysIterator) {
    if (key % 2 === 0) {
        const className = classList.item(key);
        classList.remove(className);
    }
}

У цьому прикладі ми видаляємо кожен клас з парним індексом, використовуючи метод remove() об'єкта DOMTokenList. Це показує, як метод keys() можна інтегрувати в алгоритми, що вимагають маніпуляцій з класами на основі їхніх індексів.

Отже, метод keys() об'єкта DOMTokenList є потужним інструментом для роботи з колекціями токенів у JavaScript. Він дозволяє отримувати індекси токенів, що може бути використано для ітерацій, перевірок, змін та видалення класів або інших токенів. Завдяки своїй простоті у використанні та широкому спектру застосувань, цей метод є незамінним у сучасній веб-розробці.

Синтаксис

keys()

Параметри

Return

iterator

Повертає ітератор, який містить усі ключі (імена класів) списку класів елемента DOM. Цей ітератор можна використовувати для перебору всіх класів елемента за допомогою циклів або інших конструкцій, що працюють з ітераторами. Ключі в ітераторі представлені як рядки, що відповідають іменам класів. Порядок ключів в ітераторі не визначений.

Переглядачі

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

Приклади

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

const element = document.getElementById('myElement');
const classes = element.classList;

// Отримуємо ітератор ключів
const classIterator = classes.keys();

// Перебираємо ключі за допомогою циклу for...of
for (const key of classIterator) {
  console.log(key); // Виводимо назву класу
}

const element = document.getElementById('myElement');
const classes = element.classList;

// Створюємо об'єкт, що відображає імена класів у булеві значення
const classMap = [...classes.entries()].reduce((map, [key, value]) => {
  map[key] = value;
  return map;
}, {});

// Перевіряємо наявність певних класів
const hasClass1 = classMap['class1'];
const hasClass2 = classMap['class2'];

// Створюємо складнішу умову на основі класів
if (hasClass1 && !hasClass2) {
  // Виконуємо певну логіку
}