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); // Виводимо кожен клас елемента
});

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

Порада

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

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

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

Порада

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

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

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

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

Синтаксис

forEach(callback)
forEach(callback, thisArg)

Параметри

callback

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

• currentValue (обов'язковий): Поточне значення елемента списку.
• currentIndex (необов'язковий): Індекс поточного елемента списку.
• listObj (необов'язковий): Об'єкт DOMTokenList, для якого викликається метод forEach().

автор: Bond

правити

thisArg

Значення, яке буде використовуватися як this під час виконання функції callback.

автор: Bond

правити

Повернення

none

Повертає undefined.

автор: Bond

правити

Переглядачі

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

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

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

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

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

Приклади

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

<div>Демонстраційний блок</div>

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

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

<header>
  <h2 class="title">DOMTokenList: forEach() method</h2>
  <p class="description">Виконує передану функцію один раз для кожного елемента DOMTokenList.</p>
</header>
<main>
  <div class="result">
    <ul id="taskList"></ul>
    <div>
      <input type="text" id="taskInput" placeholder="Введіть нове завдання">
      <button id="addTaskBtn">Додати завдання</button>
    </div>
    <div>
      <button id="toggleCompletedBtn">Переключити завершені</button>
    </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);
}

.completed {
  text-decoration: line-through;
  color: #999;
}

const taskList = document.getElementById('taskList');
const taskInput = document.getElementById('taskInput');
const addTaskBtn = document.getElementById('addTaskBtn');
const toggleCompletedBtn = document.getElementById('toggleCompletedBtn');

let tasks = [];

function renderTasks() {
  taskList.innerHTML = '';
  tasks.forEach((task, index) => {
    const li = document.createElement('li');
    li.textContent = task.text;
    if (task.completed) {
      li.classList.add('completed');
    }
    li.addEventListener('click', () => {
      tasks[index].completed = !tasks[index].completed;
      renderTasks();
    });
    taskList.appendChild(li);
  });
}

addTaskBtn.addEventListener('click', () => {
  const taskText = taskInput.value.trim();
  if (taskText) {
    tasks.push({ text: taskText, completed: false });
    taskInput.value = '';
    renderTasks();
  }
});

toggleCompletedBtn.addEventListener('click', () => {
  tasks.forEach(task => {
    task.completed = !task.completed;
  });
  renderTasks();
});

renderTasks();
//# sourceURL=pen.js

<div class="item active">перший елемент item (active)</div>
<div class="item completed">другий елемент item (completed)</div>

.item {
  padding: 6px;
  margin-bottom: 4px;
  border: 1px solid #ccc;
}

.in-progress {
  background: #fff3cd;
}

.archived {
  background: #e2e3e5;
  color: #555;
}

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

// DOMTokenList.forEach: обходимо класи кожного елемента й показуємо результат
elements.forEach(element => {
  const names = [];
  element.classList.forEach(name => names.push(name));
  console.log(names.join(' '));
});
// → item active in-progress
// → item archived