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

правити

Порада

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

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

Порада

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

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

Порада

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

const classList = document.querySelector('.my-class').classList;
for (const token of classList) {
  console.log(token);
}

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

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

Синтаксис

tokenList.values()

Повернення

iterator

Повертає ітератор.

автор: Bond

правити

Переглядачі

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

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

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

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

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

Приклади

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

<div class="my-element">перший елемент my-element</div>
<div class="my-element">другий елемент my-element</div>

const element = document.querySelector('.my-element');
const classes = element.classList;

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

<div class="my-element">перший елемент my-element</div>
<div class="my-element">другий елемент my-element</div>

.my-element {
  padding: 6px;
  margin-bottom: 4px;
}

.new-class-1 {
  background: #eef6ff;
}

.new-class-2 {
  border-left: 4px solid #0172ad;
}

const element = document.querySelector('.my-element');
const classes = element.classList;

// Створюємо новий масив з усіх поточних класів
const classArray = Array.from(classes.values());
console.log(classArray); // → ["my-element"]

// Додаємо нові класи
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));

console.log(element.className); // → my-element new-class-1 new-class-2

<header>
  <h2 class="title">DOMTokenList: values() method</h2>
  <p class="description">Повертає ітератор, який містить всі строкові значення токенів у списку.</p>
</header>
<main>
  <div class="result">
    <div class="element">
      <h3>Елемент з класами</h3>
      <div class="box" id="box"></div>
    </div>
    <div class="controls">
      <label>
        <input type="checkbox" id="toggle-class"> Додати/Видалити клас <code>'blue'</code>
      </label>
    </div>
    <div class="output"></div>
  </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

.box {
  width: 100px;
  height: 100px;
  background-color: red;
}

.blue {
  background-color: blue;
}

const boxElement = document.getElementById('box');
const toggleClassCheckbox = document.getElementById('toggle-class');
const showClassesButton = document.getElementById('show-classes');
const outputDiv = document.querySelector('.output');

// Додаємо початковий клас до елемента
boxElement.classList.add('box');

// Функція для виведення класів елемента
function showClasses() {
  const classes = Array.from(boxElement.classList.values());
  outputDiv.textContent = `Класи елемента: ${classes.join(', ')}`;
}

// Обробник події для чекбокса "Додати/Видалити клас 'blue'"
toggleClassCheckbox.addEventListener('change', () => {
  boxElement.classList.toggle('blue');
  showClasses();
});

// Виводимо початкові класи елемента
showClasses();
//# sourceURL=pen.js