JS метод DOMTokenList.forEach()

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

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

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

Для використання методу forEach() достатньо мати посилання на елемент DOMTokenList. Після цього можна викликати метод, передаючи йому функцію з одним параметром, що представляє поточний елемент списку. Ця функція буде виконана для кожного елемента.

Основний приклад використання методу forEach() - це зміна стилів або додавання/видалення класів елементів. Наприклад, він може використовуватися для зміни відображення елементів на сторінці залежно від їх класів або для фільтрації певних елементів за їх класами.

// Приклад використання методу forEach() для зміни стилів елементів
var elements = document.querySelectorAll('.item'); // Отримуємо всі елементи з класом 'item'
elements.forEach(function(element) {
    element.style.color = 'red'; // Змінюємо колір тексту кожного елемента на червоний
});

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

Порада:

Пам'ятайте, що метод forEach() не може бути викликаний безпосередньо на масиві. Якщо ви хочете використати його на масиві класів, спочатку скористайтеся методом Array.from() для перетворення DOMTokenList на масив, а потім використовуйте forEach(). Наприклад:

var classes = document.getElementById('myElement').classList;
Array.from(classes).forEach(function(className) {
   console.log(className); // Виводимо кожен клас елемента
});

Порада:

Використовуйте метод forEach() для виконання дій над елементами DOMTokenList з урахуванням їхнього порядку. Це особливо важливо при зміні стилів або порядку елементів на сторінці. Наприклад:

var classes = document.getElementById('myElement').classList;
classes.forEach(function(className, index) {
   console.log(`Class ${className} has index ${index}`); // Виводимо клас та його індекс
});

Порада:

Не забувайте, що функція, яку ви передаєте в метод forEach(), приймає один параметр - це поточний елемент DOMTokenList. Цей параметр може мати будь-яке ім'я, але в інших прикладах часто використовується ім'я item. Наприклад:

var classes = document.getElementById('myElement').classList;
classes.forEach(function(item) {
   console.log(item); // Виводимо кожен токен DOMTokenList
});

Синтаксис

forEach(callback)
forEach(callback, thisArg)

Параметри

*callback: Функція, яка буде викликана для кожного елемента списку, приймаючи три аргументи. Приймає три аргументи:

currentValue (обов'язковий): Поточне значення елемента списку.

currentIndex (необов'язковий): Індекс поточного елемента списку.

listObj (необов'язковий): Об'єкт DOMTokenList, для якого викликається метод forEach().
thisArg: Значення, яке буде використовуватися як this під час виконання функції callback.

Return

none: Повертає undefined.

Переглядачі

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

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

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

Приклади

У цьому прикладі ми створюємо інтерфейс для додавання та відмічання завдань як завершених. Використовується метод forEach() для ітерації над масивом завдань та рендерингу їх у списку.

При завантаженні сторінки ми рендеримо список завдань за допомогою функції renderTasks(). Ця функція очищає список та ітерує над масивом tasks за допомогою forEach(). Для кожного завдання створюється елемент `


  See the Pen <a href="https://codepen.io/css_in_ua/pen/LYoGOJm">
  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>.

У цьому прикладі ми використовуємо метод forEach() для виведення у консоль всіх класів елемента div. Це простий приклад, який демонструє основне використання методу для ітерації над всіма значеннями DOMTokenList.

const div = document.querySelector('div');
const classes = div.classList;

classes.forEach(className => {
  console.log(className);
});

У цьому більш складному прикладі ми використовуємо forEach() для додавання або видалення класів елементів на основі певних умов. Це демонструє, як метод forEach() може бути використаний для маніпуляції класами елементів у більш складних сценаріях.

const elements = document.querySelectorAll('.item');

elements.forEach(element => {
  const isActive = element.classList.contains('active');
  const isCompleted = element.classList.contains('completed');

  if (isActive && !isCompleted) {
    element.classList.add('in-progress');
  } else if (!isActive && isCompleted) {
    element.classList.remove('completed');
    element.classList.add('archived');
  }
});

JS довідник

JavaScript

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

JS метод DOMTokenList.forEach()

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

Синтаксис

Параметри

Return

Переглядачі

Приклади