JS метод DOMTokenList.values()
Загальний опис
values() є методом об'єкта DOMTokenList, який повертає ітератор, що містить всі значення рядків токенів в порядку, в якому вони зустрічаються в списку. Цей метод є корисним для перебору всіх наявних класів CSS елемента або інших властивостей об'єкта, які представлені як список токенів.
Метод values() не приймає жодних аргументів і повертає об'єкт iterator, який можна використовувати для перебору всіх значень токенів в DOMTokenList. Цей ітератор можна використовувати в циклі for...of або з методами масивів, такими як Array.from() або оператором розповсюдження (...).
Розглянемо простий приклад використання values() для виведення всіх класів CSS елемента:
<div id="myDiv" class="class1 class2 class3"></div>
const div = document.getElementById('myDiv');
const classes = div.classList;
for (const className of classes.values()) {
console.log(className); // "class1", "class2", "class3"
}
У цьому прикладі ми отримуємо об'єкт DOMTokenList з властивості classList елемента div. Потім ми використовуємо цикл for...of з методом values() для перебору всіх значень класів і виводимо їх в консоль.
Метод values() також можна використовувати з іншими методами масивів, такими як Array.from() або оператором розповсюдження (...):
const classArray = Array.from(classes.values()); // ["class1", "class2", "class3"]
const [...classSpread] = classes.values(); // ["class1", "class2", "class3"]
Ще один приклад використання values() - перевірка наявності певного класу в елементі:
const hasClass = [...classes.values()].includes('class2'); // true
Тут ми використовуємо оператор розповсюдження (...) для створення масиву з ітератора values(), а потім застосовуємо метод includes() для перевірки наявності класу "class2".
Метод values() є особливо корисним, коли потрібно працювати з об'єктами DOMTokenList, які можуть містити велику кількість токенів. Замість того, щоб перебирати всі токени вручну, ви можете використовувати values() для отримання ітератора і застосувати зручні методи масивів або цикли для обробки цих значень.
| Порада: | Оскільки |
| Порада: | Метод |
| Порада: | Слід пам'ятати, що |
Синтаксис
tokenList.values()Параметри
Return
iteratorПовертає ітератор.
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
42 |
50 |
10.1 |
29 |
16 |
| Переглядач | ||||
|---|---|---|---|---|
42 |
42 |
50 |
10.3 |
| Переглядач | ||
|---|---|---|
- |
- |
Приклади
У цьому прикладі ми використовуємо метод values() для отримання ітератора класів CSS на елементі div з id="box". Користувач може додавати/видаляти клас blue за допомогою чекбокса, а кнопка "Показати класи" виводить поточний список класів елемента в нижній частині сторінки.
У цьому прикладі ми використовуємо метод values() для перебору всіх класів CSS на елементі та виведення їх у консоль. Це простий спосіб переглянути всі застосовані класи без необхідності перетворювати DOMTokenList на масив.
const element = document.querySelector('.my-element');
const classes = element.classList;
// Перебираємо всі класи за допомогою циклу for...of
for (const className of classes.values()) {
console.log(className);
}У цьому прикладі ми використовуємо метод values() для створення нового масиву з усіх класів CSS на елементі, а потім додаємо нові класи та видаляємо існуючі. Це ілюструє, як values() може бути корисним для маніпуляцій з класами у функціональному стилі програмування.
const element = document.querySelector('.my-element');
const classes = element.classList;
// Створюємо новий масив з усіх поточних класів
const classArray = Array.from(classes.values());
// Додаємо нові класи
const newClasses = [...classArray, 'new-class-1', 'new-class-2'];
// Видаляємо існуючі класи
const updatedClasses = newClasses.filter(className => className !== 'class-to-remove');
// Очищаємо поточні класи та додаємо оновлений список
classes.value = '';
updatedClasses.forEach(className => classes.add(className));