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(selectors)

Параметри

*selectors

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

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

Return

NodeList

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

Переглядачі

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

Приклади

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

// Маємо 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 = "Оновлене повідомлення";
});

// Маємо 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";
    }
});