JS метод DOMTokenList.entries()

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

Метод entries() об'єкта DOMTokenList повертає ітератор, який надає пари ключ-значення для кожного токена (класу) в списку класів елемента DOM. Цей метод корисний для ітерації над класами елемента, а також для отримання інформації про їх індекси та значення. Він часто використовується у поєднанні з циклами або іншими ітераційними методами, такими як for...of або метод forEach.

Синтаксис методу entries() наступний:

elementNode.classList.entries();

Він не приймає жодних аргументів і повертає новий об'єкт ітератора, який містить пари ключ-значення для кожного класу в списку класів елемента. Ключ представляє індекс класу в списку, а значення - саме ім'я класу.

Розглянемо простий приклад використання методу entries():

<div id="myDiv" class="initial active highlighted"></div>

const myDiv = document.getElementById('myDiv');
const classEntries = myDiv.classList.entries();

for (const [index, className] of classEntries) {
  console.log(`Клас ${index}: ${className}`);
}

У цьому прикладі ми спочатку отримуємо посилання на елемент div за його id. Потім ми викликаємо метод entries() на об'єкті classList цього елемента, що повертає ітератор з парами ключ-значення для кожного класу. Далі ми використовуємо цикл for...of для ітерації над цим ітератором. Для кожної ітерації ми деструктуризуємо пару ключ-значення в окремі змінні index та className і виводимо їх у консоль.

Метод entries() також може бути корисним у поєднанні з іншими методами масивів або об'єктів, такими як map, filter або reduce. Наприклад, ви можете створити новий масив, що містить лише певні класи:

const selectedClasses = Array.from(myDiv.classList.entries())
  .filter(([index, className]) => className.startsWith('selected'))
  .map(([index, className]) => className);

У цьому прикладі ми спочатку перетворюємо ітератор, що повертається методом entries(), на масив за допомогою Array.from. Потім ми використовуємо метод filter для відфільтровування лише тих класів, які починаються з 'selected'. Нарешті, ми застосовуємо метод map для створення нового масиву, що містить лише імена класів.

Підсумовуючи, метод entries() об'єкта DOMTokenList є потужним інструментом для отримання інформації про класи елемента DOM та маніпуляцій з ними. Він дозволяє ітеруватися над класами, отримувати їх індекси та значення, а також використовувати ці дані в поєднанні з іншими методами для створення більш складних і гнучких рішень у веб-додатках.

Порада:	Комбінуйте метод `entries()` з іншими методами масивів, такими як `map`, `filter` або `reduce`, для створення нових масивів або об'єктів на основі класів елемента. Це може бути корисним для маніпуляцій з класами або створення похідних даних. Наприклад: `const selectedClasses = Array.from(element.classList.entries()).filter(([index, className]) => className.startsWith('selected')).map(([index, className]) => className);`.
Порада:	Використовуйте метод `entries()` для перевірки наявності певних класів в списку класів елемента. Це може бути ефективнішим, ніж використання методу `contains()` в циклах або на великих наборах даних. Наприклад: `const hasSelectedClass = Array.from(element.classList.entries()).some(([index, className]) => className === 'selected');`.
Порада:	Для досвідчених програмістів: розглядайте можливість використання методу `entries()` у поєднанні з іншими функціональними методами, такими як `flatMap` або `reduce`, для створення більш складних і гнучких рішень для маніпуляцій з класами елементів. Це може бути корисним у сценаріях, де потрібно виконувати декілька операцій над класами одночасно або створювати похідні дані на основі класів. Наприклад: `const classStats = Array.from(element.classList.entries()).reduce((stats, [index, className]) => { stats[className] = (stats[className] \|\| 0) + 1; return stats; }, {});`.

Синтаксис

entries()

Параметри

Return

iterator: Повертає ітератор, який містить всі пари індекс-значення для кожного елемента.

Переглядачі

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

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

Переглядач
	-	-

Приклади

У цьому прикладі ми демонструємо використання методу entries() для отримання списку класів елемента div і візуалізації їх у вигляді списку ul. При натисканні на кнопку "Перемикнути класи" ми ітеруємося над класами елемента div за допомогою методу entries() та циклу for...of, створюючи елемент li для кожного класу з його індексом та значенням. Потім ми очищаємо список ul і додаємо до нього всі створені елементи li, відображаючи поточні класи елемента. Крім того, ми перемикаємо класи highlighted та bordered на елементі div, що змінює його зовнішній вигляд. Користувач може взаємодіяти з прикладом, натискаючи на кнопку та спостерігаючи зміни в списку класів та стилях елемента div.


  See the Pen <a href="https://codepen.io/css_in_ua/pen/GRaJxxK">
  Untitled</a> by css.in.ua (<a href="https://codepen.io/css_in_ua">@css_in_ua</a>)
  on <a href="https://codepen.io">CodePen</a>.

У цьому прикладі ми ітеруємося над класами елемента div за допомогою методу entries() та циклу for...of. Для кожної ітерації ми виводимо індекс та значення класу в консоль.

<div id="myDiv" class="initial active highlighted"></div>

<script>
const myDiv = document.getElementById('myDiv');
const classEntries = myDiv.classList.entries();

for (const [index, className] of classEntries) {
  console.log(`Клас ${index}: ${className}`);
}
</script>

У цьому прикладі ми створюємо новий масив, що містить лише класи елемента div, які починаються з selected. Для цього ми використовуємо метод entries() у поєднанні з методами масиву filter та map.

<div id="myDiv" class="initial selected-item selected-active highlighted"></div>

<script>
const myDiv = document.getElementById('myDiv');
const selectedClasses = Array.from(myDiv.classList.entries())
  .filter(([index, className]) => className.startsWith('selected'))
  .map(([index, className]) => className);

console.log(selectedClasses); // ['selected-item', 'selected-active']
</script>

JS довідник

JavaScript

Наповнення JS розділу