JS метод NodeList.values()

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

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

Розглянемо простий приклад використання values():

const paragraphs = document.querySelectorAll('p');
const values = paragraphs.values();

for (const value of values) {
  console.log(value.textContent);
}

У цьому коді ми отримуємо NodeList усіх елементів <p> на сторінці за допомогою document.querySelectorAll('p'). Потім ми застосовуємо метод values() до цього NodeList, що повертає ітератор з вузлами. Далі ми використовуємо цикл for...of для перебору ітератора та виводимо текстовий вміст кожного вузла в консоль.

Метод values() також може бути корисним при перетворенні NodeList на масив. Наприклад:

const links = document.querySelectorAll('a');
const linkArray = Array.from(links.values());

console.log(linkArray);

Тут ми отримуємо NodeList всіх елементів <a> (посилань) на сторінці. Потім ми використовуємо links.values() для отримання ітератора з посиланнями та Array.from() для перетворення цього ітератора на масив. Результуючий масив linkArray міститиме всі елементи <a> зі сторінки.

values() також можна використовувати для перебору вузлів у NodeList за допомогою циклу for...of та виконання певних дій з кожним вузлом. Наприклад:

<ul id="myList">
  <li>Елемент 1</li>
  <li>Елемент 2</li>
  <li>Елемент 3</li>
</ul>

const list = document.getElementById('myList');
const items = list.children;

for (const item of items.values()) {
  item.style.color = 'red';
}

У цьому прикладі ми отримуємо NodeList дочірніх елементів списку за допомогою list.children. Потім ми використовуємо цикл for...of для перебору ітератора, отриманого за допомогою items.values(). На кожній ітерації ми встановлюємо колір тексту поточного елемента списку на червоний.

Метод values() є зручним інструментом для роботи з NodeList у JavaScript. Він дозволяє легко отримувати доступ до значень вузлів, перетворювати NodeList на масиви та виконувати різні операції з вузлами під час перебору. Цей метод робить роботу з NodeList більш гнучкою та ефективною, особливо у поєднанні з циклами for...of та іншими конструкціями, які працюють з ітераторами.

Синтаксис

NodeList.values()

Параметри

Return

iterator

Повертає ітератор, який містить значення всіх елементів у NodeList.

Переглядачі

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

Приклади

• Приклад 1
• Приклад 2
• Приклад 3

const paragraphs = document.querySelectorAll('p');
const values = paragraphs.values();

for (const value of values) {
  console.log(value.textContent);
}

<ul id="myList">
  <li>Елемент 1</li>
  <li>Елемент 2</li>
  <li>Елемент 3</li>
  <li>Елемент 4</li>
  <li>Елемент 5</li>
</ul>

<script>
const list = document.getElementById('myList');
const items = list.children;
let counter = 0;

for (const item of items.values()) {
  if (counter % 2 === 1) {
    item.style.backgroundColor = 'yellow';
    item.style.fontWeight = 'bold';
  }
  counter++;
}
</script>