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(), у змінну для багаторазового використання в межах одного циклу або функції. Це допоможе уникнути повторного виклику методу та підвищити ефективність коду. Наприклад:

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

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

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

Порада

Комбінуйте метод keys() з іншими методами DOMTokenList, такими як item(), add(), remove(), та toggle(), щоб виконувати більш складні маніпуляції з класами. Наприклад, можна чергувати класи між двома станами:

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

for (let key of keysIterator) {
    const className = element.classList.item(key);
    element.classList.toggle(className + '-active');
}

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

Порада

Застосовуйте метод keys() для створення динамічних списків класів або інших атрибутів, що потребують послідовного перебору індексів. Це може бути корисно при створенні функціоналу, що залежить від порядку елементів у списку. Наприклад, можна додавати числовий суфікс до кожного класу:

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

for (let key of keysIterator) {
    const className = element.classList.item(key);
    element.classList.add(`${className}-${key}`);
}

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

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

Синтаксис

keys()

Повернення

iterator

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

автор: Bond

правити

Переглядачі

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

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

Переглядач
	42	50	10.1	29	16	—

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

Переглядач
	42	42	50	10.3

Приклади

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

<div id="myElement">Демонстраційний елемент</div>

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

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

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

<div id="myElement">Демонстраційний елемент</div>

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) {
  // Виконуємо певну логіку
}