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

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

Порада

Використовуйте метод entries() для перевірки наявності певних класів в списку класів елемента. Це може бути ефективнішим, ніж використання методу contains() в циклах або на великих наборах даних. Наприклад: const hasSelectedClass = Array.from(element.classList.entries()).some(([index, className]) => className === 'selected');.

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

Порада

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

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

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

Синтаксис

entries()

Повернення

iterator

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

автор: Bond

правити

Переглядачі

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

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

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

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

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

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

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

Приклади

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

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