Пошук уроків, статей та іншого контенту
querySelector, querySelectorAll та старіші методи пошуку — синтаксис, різниця та коли що використовувати.
Перш ніж змінити текст, стиль чи додати обробник події, потрібно отримати посилання на конкретний DOM-вузол — JavaScript не працює з елементами «за назвою», як людина читає сторінку, а лише через об'єкти, які треба спочатку знайти.
querySelector приймає CSS-селектор (той самий синтаксис, що й у файлах стилів) і повертає перший елемент, що збігається, або null, якщо такого немає:
document.querySelector("h1"); // перший <h1> на сторінці
document.querySelector(".card"); // перший елемент із класом card
document.querySelector("#main-nav"); // елемент з id="main-nav"
document.querySelector("input[type='email']"); // перший email-інпутПовертає NodeList (псевдомасив) з усіма елементами, що відповідають селектору:
const cards = document.querySelectorAll(".card");
cards.length; // кількість знайдених елементів
cards.forEach((card) => {
console.log(card.textContent);
});NodeList має forEach, але не має map/filter/reduce з модуля «Об'єкти та масиви» — це не справжній масив. Щоб застосувати ці методи, спочатку перетворіть: Array.from(cards) або [...cards] (spread з того самого модуля).
До querySelector існували вужчі методи — вони досі трапляються в старому коді й документації, тому варто впізнавати їх, навіть якщо для нового коду обирати querySelector:
document.getElementById("main-nav"); // за id, без "#"
document.getElementsByClassName("card"); // "живий" HTMLCollection, не CSS-селектор
document.getElementsByTagName("li"); // "живий" HTMLCollectiongetElementsByClassName і getElementsByTagName повертають «живі» колекції — вони автоматично оновлюються, якщо DOM змінюється, тоді як querySelectorAll повертає статичний знімок на момент виклику. Це рідко має значення, але може спричинити неочевидні баги при зміні DOM під час перебору живої колекції.
querySelector/querySelectorAll можна викликати не лише на document, а й на будь-якому елементі — пошук обмежиться його нащадками:
const form = document.querySelector("#login-form");
const emailInput = form.querySelector("input[type='email']"); // шукає лише всередині formconst allTasks = document.querySelectorAll(".task");
const completedTasks = document.querySelectorAll(".task.completed");
console.log(`Виконано ${completedTasks.length} з ${allTasks.length}`);querySelector повертає null, якщо нічого не знайдено — звернення до властивості null (наприклад, .textContent) кидає TypeError. Завжди перевіряйте результат перед використанням, якщо елемент може бути відсутній.
Очікування, що querySelectorAll повертає справжній масив — методи на кшталт map викличуть помилку без попереднього Array.from.
Забування, що querySelector повертає лише ПЕРШИЙ збіг — для всіх елементів потрібен querySelectorAll.
querySelector і querySelectorAll — сучасний, універсальний спосіб знаходити елементи через звичний CSS-синтаксис: перший повертає один елемент (або null), другий — усі, що збігаються (NodeList, не масив). Старіші getElementById/getElementsByClassName/getElementsByTagName досі працюють і трапляються в існуючому коді, але для нового коду querySelector/querySelectorAll — типовий вибір.
Спробуйте самостійно
На довільній сторінці виконайте в консолі document.querySelectorAll("a"), перетворіть результат на масив через Array.from і використайте map (з модуля «Об'єкти та масиви»), щоб отримати масив усіх href-посилань на сторінці.