JS метод Element.querySelectorAll()

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

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

Синтаксис методу querySelectorAll() подібний до querySelector():

elementOrDocument.querySelectorAll(селектор);

Тут elementOrDocument - це вихідний елемент або об'єкт document, з якого починається пошук, а селектор - це рядок, що містить селектор CSS, за яким здійснюється пошук елементів.

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

// Вибір усіх елементів з класом "highlight"
const highlightedElements = document.querySelectorAll('.highlight');

// Вибір усіх посилань на зовнішні ресурси
const externalLinks = document.querySelectorAll('a[target="_blank"]');

// Вибір усіх елементів `li` всередині елемента з ідентифікатором "nav"
const navItems = document.querySelector('#nav').querySelectorAll('li');

Після того, як елементи були вибрані, ви можете виконувати різноманітні операції з ними, наприклад, змінювати їх стилі, додавати або видаляти класи, маніпулювати їх вмістом або обробляти події. Для цього ви можете використовувати цикли або методи масивів, такі як forEach(), map() або filter():

// Змінити колір тексту для всіх виділених елементів
const highlightedElements = document.querySelectorAll('.highlight');
highlightedElements.forEach(element => {
  element.style.color = 'red';
});

// Додати клас "active" до кожного елемента навігації
const navItems = document.querySelectorAll('#nav li');
navItems.forEach(item => item.classList.add('active'));

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

const articleBody = document.querySelector('article');
const paragraphs = articleBody.querySelectorAll('p');

Слід зазначити, що querySelectorAll() повертає статичну колекцію (NodeList) елементів, а не динамічний масив. Це означає, що якщо після виклику querySelectorAll() на сторінці з'являться нові елементи, що відповідають селектору, вони не будуть автоматично додані до колекції. Якщо вам потрібно працювати з динамічною колекцією, розгляньте можливість використання getElementsByClassName() або перетворення NodeList на масив за допомогою Array.from().

Синтаксис

querySelectorAll(selectors)

Параметри

*selectors

Рядок, що містить один або більше селекторів CSS для вибору елементів. Це має бути коректний рядок селектора CSS, інакше буде згенеровано виняток SyntaxError. Кілька селекторів можна зазначити, розділивши їх комами.

Return

NodeList

Повертає статичну колекцію (NodeList) елементів, що містить один об'єкт Element для кожного нащадка, який відповідає принаймні одному із зазначених селекторів CSS. Якщо жодний елемент не відповідає селектору, повертається порожня колекція. Важливо зазначити, що якщо вказані селектори включають CSS псевдоелемент, повернена колекція завжди буде порожньою, оскільки псевдоелементи не вважаються нащадками у дереві DOM.

Переглядачі

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

Приклади

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

// Знаходимо всі елементи з класом "highlight"
const highlightedElements = document.querySelectorAll('.highlight');

// Ітеруємо по всіх знайдених елементах
highlightedElements.forEach(element => {
  // Змінюємо колір тексту елемента
  element.style.color = 'red';
});

// Знаходимо всі елементи <a> (посилання)
const links = document.querySelectorAll('a');

// Фільтруємо посилання, які ведуть на зовнішні сайти
const externalLinks = Array.from(links).filter(link => {
  const linkHost = new URL(link.href).host;
  const currentHost = window.location.host;
  return linkHost !== currentHost;
});

// Додаємо клас "external-link" до зовнішніх посилань
externalLinks.forEach(link => {
  link.classList.add('external-link');
});