JS метод NodeList.forEach()

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

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

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

nodeList.forEach(callback, thisArg)

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

1. currentValue: поточний оброблюваний вузол.
2. currentIndex (необов'язковий): індекс поточного вузла в NodeList.
3. 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 в масив, а потім застосовуйте потрібні операції з масивом.

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

Порада

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

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

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

Порада

Якщо вам потрібно передати додаткові аргументи у функцію 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;
}

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

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

Синтаксис

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

Параметри

callback

Функція для виконання над кожним елементом NodeList.

автор: Bond

правити

thisArg

Значення, що використовується як this під час виконання callback.

автор: Bond

правити

Повернення

undefined

Повертає undefined.

автор: Bond

правити

Переглядачі

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

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

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

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

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

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

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

Приклади

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

<button>Натисни</button>

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

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

<div id="task-list">Демонстраційний елемент</div>

// Отримуємо список завдань
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);
  });
});