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 та іншими конструкціями, які працюють з ітераторами.

правити

Порада

Не забувайте перевіряти наявність підтримки методу values() у ваших цільових браузерах, оскільки цей метод може бути не підтримуваний у деяких старих версіях браузерів. В такому випадку рекомендується використовувати альтернативні методи або здійснити підтримку через поліфіли.

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

Порада

Використовуючи метод values(), ви можете зручно отримати всі значення елементів у NodeList і виконати з ними певні операції, наприклад, фільтрацію, пошук або зміну.

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

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

Синтаксис

NodeList.values()

Повернення

iterator

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

автор: Bond

правити

Переглядачі

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

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

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

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

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

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

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

Приклади

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

<p>Абзац для прикладу.</p>

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>

// querySelectorAll повертає NodeList — саме в нього є метод values()
const items = document.querySelectorAll('#myList li');
let counter = 0;

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

    counter++;
}