Селектори для роботи з DOM елементами

JavaScriptJunior~3 хв читання

Селектори DOM - це способи знаходити елементи на сторінці за допомогою JavaScript. Без них неможливо взаємодіяти з HTML - адже спершу потрібно отримати елемент, щоб щось із ним зробити (змінити текст, стиль, видалити, додати обробник події тощо).

1. Що таке "селектор"

Селектор - це спосіб вказати, який елемент у DOM потрібно вибрати. Він може бути:

за id,
за тегом,
за класом,
за атрибутом,
або через CSS-селектор.

2. Основні методи для вибору елементів

Метод	Що повертає	Що приймає	Приклад
`getElementById(id)`	один елемент	`id` (без `#`)	`document.getElementById("header")`
`getElementsByClassName(class)`	HTMLCollection (масивоподібна)	ім'я класу (без `.`)	`document.getElementsByClassName("menu")`
`getElementsByTagName(tag)`	HTMLCollection	ім'я тега	`document.getElementsByTagName("p")`
`querySelector(selector)`	перший елемент	CSS-селектор	`document.querySelector(".menu li")`
`querySelectorAll(selector)`	NodeList (усі підхожі)	CSS-селектор	`document.querySelectorAll("div > p")`

3. Детально про кожен

`document.getElementById()`

Знаходить один елемент за атрибутом id.

javascript

<h1 id="title">Привіт!</h1>

javascript

const el = document.getElementById("title");
console.log(el.textContent); // Привіт!

Дуже швидкий. Працює тільки за id. Повертає тільки один елемент.

`document.getElementsByClassName()`

Шукає всі елементи із зазначеним класом.

javascript

<p class="text">Перший</p>
<p class="text">Другий</p>

javascript

const els = document.getElementsByClassName("text");
console.log(els.length); // 2

Швидкий, підтримується всюди. Повертає HTMLCollection (потрібно перетворювати в масив для forEach).

`document.getElementsByTagName()`

Знаходить усі елементи за тегом.

javascript

const paragraphs = document.getElementsByTagName("p");

Повертає живу колекцію - якщо в DOM з'явиться новий <p>, він автоматично додасться.

`document.querySelector()`

Використовує CSS-селектори. Повертає перший знайдений елемент.

javascript

const item = document.querySelector(".menu li.active");

Універсальний - підтримує всі можливості CSS-селекторів. Повертає тільки один елемент.

`document.querySelectorAll()`

Повертає всі елементи, що підходять під CSS-селектор.

javascript

const items = document.querySelectorAll(".menu li");
items.forEach(li => console.log(li.textContent));

Повертає NodeList, можна використовувати forEach(). Не оновлюється автоматично (на відміну від getElementsBy...).

4. Типи селекторів (як у CSS)

Селектор	Приклад	Опис
За тегом	`"div"`	усі `<div>`
За класом	`".item"`	усі елементи з класом `.item`
За id	`"#header"`	елемент з `id="header"`
За атрибутом	`"[type='text']"`	елементи з `type="text"`
Нащадки	`"ul li"`	усі `<li>` всередині `<ul>`
Прямі нащадки	`"ul > li"`	тільки ті, що на 1 рівні вкладеності
Комбіновані	`"div.item.active"`	`<div class="item active">`
Псевдокласи	`"li:first-child"`, `"input:checked"`	специфічні стани

5. Коли що використовувати

Мета	Краще використовувати
Швидко отримати елемент за `id`	`getElementById()`
Знайти за класом або тегом	`getElementsByClassName()` / `getElementsByTagName()`
Складний пошук (як у CSS)	`querySelector()` / `querySelectorAll()`
Колекція, що оновлюється	`getElementsBy...`
Разовий статичний список	`querySelectorAll()`

6. Приклад комплексного пошуку:

HTML:

javascript

<div class="card">
  <h2 class="title">Заголовок</h2>
  <p class="desc">Опис</p>
</div>

JS:

javascript

const card = document.querySelector(".card");
const title = card.querySelector(".title");
const desc = card.querySelector(".desc");

console.log(title.textContent); // "Заголовок"

7. Робота зі знайденими елементами

Після того як елемент знайдено, можна:

javascript

const el = document.querySelector("#myDiv");
el.textContent = "Новий текст";       // змінити вміст
el.style.color = "red";               // змінити стиль
el.classList.add("active");           // додати клас
el.addEventListener("click", fn);     // повісити обробник

8. Корисна порада:

Використовуй querySelector / querySelectorAll - це універсальний і сучасний спосіб (працює з будь-якими CSS-селекторами).
Методи getElementById і getElementsByClassName корисні, якщо потрібна максимальна продуктивність (наприклад, у старому коді або при тисячах елементів).

Коротко:

Метод	Повертає	Особливості
`getElementById(id)`	один елемент	швидкий, унікальний id
`getElementsByClassName()`	HTMLCollection	динамічна колекція
`getElementsByTagName()`	HTMLCollection	за тегом
`querySelector()`	перший елемент	CSS-селектор
`querySelectorAll()`	NodeList	усі підхожі елементи

Підсумок: Селектори DOM - це інструменти для пошуку елементів на сторінці.

Прості (getElementById) - швидкі. Сучасні (querySelector) - гнучкі і потужні.

Використовуй CSS-селектори, коли потрібно точно вказати елемент, і прості методи - коли важлива швидкість і читабельність.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.