JS метод Document.querySelectorAll()

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

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

Метод querySelectorAll() використовується для виконання широкого спектру завдань від простого пошуку елементів для читання або зміни їх властивостей до складніших операций, таких як масове призначення обробників подій або динамічне змінення стилів. Оскільки метод повертає NodeList, він дозволяє виконувати ітерацію по знайденим елементам за допомогою циклів або методів масивів (у сучасних браузерах), що робить його особливо потужним для роботи з динамічним вмістом.

Використання методу

Простий приклад використання querySelectorAll() може виглядати наступним чином:

// Знаходження усіх елементів <p> на сторінці
var paragraphs = document.querySelectorAll("p");
// Встановлення кольору тексту кожного параграфа в червоний
paragraphs.forEach(function(paragraph) {
    paragraph.style.color = "red";
});

Цей код демонструє базове застосування querySelectorAll() для знаходження усіх елементів <p> на сторінці та зміни кольору їх тексту на червоний. Використання методу forEach дозволяє легко ітерувати через кожен елемент в NodeList.

Складніші приклади

querySelectorAll() підтримує складні селектори, що дозволяє розробникам виконувати детальний пошук в DOM. Наприклад, якщо потрібно знайти всі елементи, що мають певний клас і знаходяться в межах елементів із певним ідентифікатором, можна використовувати такий код:

// Знаходження усіх елементів з класом .example, що знаходяться в межах #container
var exampleElements = document.querySelectorAll("#container .example");
// Додавання класу .highlighted до кожного знайденого елемента
exampleElements.forEach(function(element) {
    element.classList.add("highlighted");
});

Цей приклад демонстру

є використання querySelectorAll() для знаходження елементів за допомогою комбінованих селекторів і маніпулювання цими елементами шляхом додавання нового класу.

Розширені можливості

Оскільки querySelectorAll() повертає статичний NodeList, він не відображає зміни в DOM, що відбуваються після його виклику. Це означає, що якщо документ змінюється (наприклад, нові елементи додаються за відповідними селекторами), вам потрібно знову викликати querySelectorAll(), щоб отримати оновлений список елементів. Така поведінка робить метод особливо надійним при роботі з динамічними веб-додатками, де вміст сторінки може змінюватися в результаті взаємодій користувача або асинхронних запитів до сервера.

Застосування querySelectorAll() є фундаментальним у сучасній веб-розробці, надаючи розробникам могутній інструмент для ефективної роботи з елементами DOM. Його здатність виконувати пошук за складними селекторами та легкість в ітерації по знайденим елементам робить його незамінним у розробці інтерактивних та динамічно змінних веб-сторінок.

правити

Порада

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

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

Порада

Хоча querySelectorAll() повертає NodeList, який схожий на масив, він не володіє всіма методами масиву, такими як map або reduce. Для використання цих методів, спершу потрібно перетворити NodeList на масив, використовуючи Array.from() або оператор розпаковування ....

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

Порада

Використовуйте querySelectorAll() для оптимізації продуктивності вашого коду, особливо при роботі з великими документами. Замість того, щоб викликати getElementById() або getElementsByClassName() кілька разів, querySelectorAll() дозволяє здійснити складний пошук за один раз. Однак, будьте обережні з використанням складних селекторів, оскільки вони можуть сповільнити виконання вашого коду.

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

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

Синтаксис

querySelectorAll(selectors)

Параметри

selectors

Рядок, що містить один або кілька селекторів для порівняння. Цей рядок мусить бути валідним CSS селектором; у випадку невідповідності буде сгенеровано виняток SyntaxError.

Можна вказати декілька селекторів, розділивши їх комами.

автор: Bond

правити

Повернення

NodeList

Повертає неактивний NodeList, який містить об'єкт Element для кожного елемента, що відповідає принаймні одному з вказаних селекторів, або порожній NodeList у випадку відсутності збігів. Зауважте: якщо серед вказаних селекторів присутній CSS псевдо-елемент, повернутий список завжди буде порожнім.

автор: Bond

правити

Переглядачі

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

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

Переглядач
	1	3.5	3.1	10	12	9

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

Переглядач
	4.4	18	4	2

Приклади

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

<div class="message">перший елемент message</div>
<div class="message">другий елемент message</div>

// Маємо HTML-структуру з кількома параграфами
// <p class="message">Повідомлення 1</p>
// <p class="message">Повідомлення 2</p>
// <p class="message">Повідомлення 3</p>

// Використовуємо `Document.querySelectorAll()` для вибору всіх параграфів з класом 'message'
var messages = document.querySelectorAll(".message");

// Змінюємо текст кожного параграфа
messages.forEach(function(msg) {
    msg.textContent = "Оновлене повідомлення";
});

<div class="highlight">перший елемент highlight</div>
<div class="highlight">другий елемент highlight</div>

// Маємо HTML-структуру з кількома параграфами, деякі з яких містять клас 'highlight'
// <p class="highlight">Текст для виділення</p>
// <p>Звичайний текст</p>
// <p class="highlight">Інший текст для виділення</p>

// Використовуємо `Document.querySelectorAll()` для вибору всіх параграфів з класом 'highlight'
var highlighted = document.querySelectorAll(".highlight");

highlighted.forEach(function(item) {
    // Перевіряємо, чи містить параграф текст 'виділення'
    if (item.textContent.includes("виділення")) {
        // Змінюємо колір фону на жовтий
        item.style.backgroundColor = "yellow";
    }
});