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

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() для отримання ітератора і застосувати зручні методи масивів або цикли для обробки цих значень.

Порада:

Оскільки DOMTokenList є ітерованим, його можна використовувати у циклі for...of без явного виклику values(). Наприклад:

const classList = document.querySelector('.my-class').classList;
for (const token of classList) {
  console.log(token);
}
Порада:

Метод values() особливо корисний, коли потрібно передати список токенів як аргумент функції, яка очікує ітератор. Наприклад, Array.from(classList.values()) створить новий масив з усіх токенів у classList.
Порада:

Слід пам'ятати, що values() повертає ітератор, який можна використати лише один раз. Якщо потрібно повторно перебрати токени, необхідно викликати values() знову або перетворити DOMTokenList на масив.

Синтаксис

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

Спільнота

Зв'язок