Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Селектори для роботи з DOM елементами». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

**Селектори 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-селектори, коли потрібно точно вказати елемент,
> і прості методи - коли важлива швидкість і читабельність.

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати668 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.