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

правити

Порада

Будьте обережні при використанні складних селекторів CSS у querySelectorAll(). Хоча вони можуть бути зручними, їх використання може негативно вплинути на продуктивність, особливо якщо вони застосовуються до великих фрагментів DOM. У таких випадках розгляньте можливість використання більш простих селекторів або альтернативних методів, таких як getElementsByClassName().

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

Порада

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

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

Порада

Комбінуйте querySelectorAll() з методами масивів для ефективної обробки колекції елементів. Наприклад, ви можете використати filter() для отримання підмножини елементів, що відповідають певній умові, або map() для застосування функції до кожного елемента колекції:

const links = document.querySelectorAll('a');
const externalLinks = Array.from(links).filter(link => link.target === '_blank');
const linkTexts = externalLinks.map(link => link.textContent);

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

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

Синтаксис

querySelectorAll(selectors)

Параметри

selectors

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

автор: Bond

правити

Повернення

NodeList

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

автор: Bond

правити

Винятки

SyntaxError: Це виключення генерується, якщо синтаксис зазначеного рядка селекторів некоректний і не відповідає правилам CSS. Перед використанням querySelectorAll() необхідно переконатися, що рядок селектора складений правильно.

Переглядачі

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

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

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

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

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

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

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

Приклади

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

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

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

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

<a href="#demo">перше посилання</a>
<a href="#demo2">друге посилання</a>

// Знаходимо всі елементи <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');
});