JS метод NodeList.forEach()

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

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

Синтаксис методу forEach() виглядає наступним чином:

nodeList.forEach(callback, thisArg)

Перший аргумент callback є функцією, яка буде викликана для кожного елемента NodeList. Ця функція приймає три аргументи:

currentValue: поточний оброблюваний вузол.
currentIndex (необов'язковий): індекс поточного вузла в NodeList.
array (необов'язковий): NodeList, для якого був викликаний метод forEach().

Другий аргумент thisArg є значенням, яке використовуватиметься як this при виконанні функції callback.

Розглянемо простий приклад використання forEach() для додавання обробника події натискання на всі кнопки на сторінці:

// Отримуємо всі кнопки на сторінці
const buttons = document.querySelectorAll('button');

// Додаємо обробник події натискання для кожної кнопки
buttons.forEach(function(button) {
  button.addEventListener('click', function() {
    console.log('Кнопку натиснуто!');
  });
});

У цьому прикладі ми спочатку отримуємо NodeList всіх кнопок на сторінці за допомогою document.querySelectorAll('button'). Потім ми використовуємо метод forEach() для проходження по кожній кнопці в NodeList та додавання обробника події натискання за допомогою button.addEventListener('click', ...).

Метод forEach() також дозволяє передавати додатковий аргумент thisArg, який встановлює значення this всередині функції callback. Це може бути корисним, якщо вам потрібно отримати доступ до властивостей або методів об'єкта з функції callback. Наприклад:

const person = {
  name: 'Іван',
  greetButtons: function() {
    const buttons = document.querySelectorAll('button');
    buttons.forEach(function(button) {
      button.addEventListener('click', function() {
        console.log(`Привіт, ${this.name}!`);
      }.bind(this));
    }, this);
  }
};

person.greetButtons();

У цьому прикладі ми використовуємо thisArg для передачі об'єкта person як значення this всередині функції callback. Таким чином, при натисканні на кнопку ми можемо отримати доступ до властивості name об'єкта person.

Метод forEach() є потужним інструментом для роботи з NodeList і часто використовується для маніпулювання вузлами DOM. Він забезпечує зручний спосіб виконання операцій з кожним елементом NodeList без необхідності явно проходити по циклу.

Порада:

Пам'ятайте, що метод forEach() не змінює оригінальний NodeList. Якщо вам потрібно створити новий масив або NodeList на основі існуючого, використовуйте методи Array.from() або spread (...) оператор для перетворення NodeList в масив, а потім застосовуйте потрібні операції з масивом.

Порада:

Якщо вам потрібно зупинити виконання forEach() до того, як він досягне кінця NodeList, ви можете використати інструкцію return всередині функції callback. Це не зупинить повністю виконання forEach(), але функція callback більше не буде викликатися для решти елементів NodeList. Наприклад:

const links = document.querySelectorAll('a');
links.forEach(link => {
  if (link.href.startsWith('https://example.com')) {
    return; // Пропускаємо поточний елемент і переходимо до наступного
  }
  // Інші операції з посиланням
});

Порада:

Якщо вам потрібно передати додаткові аргументи у функцію callback, яку ви передаєте в forEach(), ви можете використати стрілкову функцію або bind(). Це дозволить вам зберегти правильне значення this і передати додаткові аргументи в функцію callback. Наприклад:

const numbers = document.querySelectorAll('.number');
const multiplier = 2;
numbers.forEach(number => {
  number.textContent = multiplyByNumber(parseInt(number.textContent), multiplier);
});

function multiplyByNumber(num, multiplier) {
  return num * multiplier;
}

Синтаксис

NodeList.forEach(callback)
NodeList.forEach(callback, thisArg)

Параметри

*callback: Функція для виконання над кожним елементом NodeList.
thisArg: Значення, що використовується як this під час виконання callback.

Return

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

Переглядачі

Переглядач
	51	50	10	38	16

Переглядач
	51	51	50	10

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

Приклади

Цей приклад демонструє, як за допомогою NodeList.forEach() можна змінити стиль кожного елемента списку при натисканні кнопки. Користувачі зможуть взаємодіяти зі списком, натискаючи на кнопку для зміни вигляду елементів.


  See the Pen <a href="https://codepen.io/css_in_ua/pen/WNBbzER">
  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() для додавання обробників події натискання до всіх кнопок на сторінці. Цей приклад демонструє один з найпоширеніших випадків використання forEach() для маніпулювання вузлами DOM.

// Отримуємо всі кнопки на сторінці
const buttons = document.querySelectorAll('button');

// Додаємо обробник події натискання для кожної кнопки
buttons.forEach(function(button) {
  button.addEventListener('click', function() {
    console.log(`Кнопку "${button.textContent}" натиснуто!`);
  });
});

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

// Отримуємо список завдань
const taskList = document.querySelector('#task-list');

// Функція для відзначення завдання як виконаного
function markTaskAsCompleted(task) {
  task.classList.toggle('completed');
}

// Функція для видалення завдання зі списку
function deleteTask(task) {
  taskList.removeChild(task);
}

// Додаємо обробники подій до кожного завдання в списку
taskList.querySelectorAll('li').forEach(function(task) {
  // Додаємо обробник події натискання для відзначення завдання як виконаного
  task.querySelector('.mark-completed').addEventListener('click', function() {
    markTaskAsCompleted(task);
  });

  // Додаємо обробник події натискання для видалення завдання
  task.querySelector('.delete').addEventListener('click', function() {
    deleteTask(task);
  });
});

JS довідник

JavaScript

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

JS метод NodeList.forEach()

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

Синтаксис

Параметри

Return

Переглядачі

Приклади