Вступ до запитів до DOM

Запити до DOM передбачають вибір і доступ до конкретних елементів у документі для подальшої маніпуляції або взаємодії з ними. JavaScript надає декілька методів для вибору елементів, кожен з яких має своє призначення та поведінку.

GetElementById

getElementById використовується для вибору одного елемента за його унікальним ідентифікатором. Це один із найпоширеніших методів, оскільки ідентифікатори повинні бути унікальними в межах документа.
Використання: Найкраще підходить для вибору конкретного елемента, якщо відомий його ID.
Повертає: Один елемент або null, якщо елемент не знайдено.

// HTML:
<div id="header">Welcome</div>

// JS:
const headerEl = document.getElementById('header');
console.log(headerEl.textContent); // Output: Welcome

GetElementsByClassName

getElementsByClassName вибирає елементи за назвою класу та повертає живу HTMLCollection елементів.
Використання: Корисно, коли потрібно вибрати кілька елементів з однаковим класом.
Повертає: Живу HTMLCollection відповідних елементів, яка оновлюється при зміні DOM.
Обмеження: Неможливо безпосередньо використовувати методи масиву; за потреби потрібно конвертувати у масив.

// HTML:
<p class="text">First paragraph</p>
<p class="text">Second paragraph</p>

// JS:
const textEls = document.getElementsByClassName('text');
console.log(textEls); // Output: HTMLCollection(2) [p.text, p.text]
console.log(textEls[0].textContent); // Output: First paragraph
console.log(textEls[1].textContent); // Output: Second paragraph

GetElementsByTagName

getElementsByTagName вибирає елементи за їхнім тегом (наприклад, div, p) і повертає живу HTMLCollection.
Використання: Оптимально для вибору всіх елементів певного типу.
Повертає: Живу HTMLCollection елементів.
Обмеження: Не є специфічним, оскільки вибирає всі елементи заданого тегу в межах контексту.

// HTML:
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

// JS:
const listItems = document.getElementsByTagName('li');
console.log(listItems); // Output: HTMLCollection(2) [li, li]
console.log(listItems.length); // Output: 2

QuerySelector

querySelector вибирає перший елемент, що відповідає CSS-селектору. Це універсальний метод, який дозволяє використовувати будь-який дійсний CSS-селектор для пошуку елементів.
Використання: Підходить для вибору першого елемента, що відповідає будь-якому CSS-селектору.
Повертає: Перший відповідний елемент або null, якщо збігів не знайдено.

// HTML:
<div class="box" id="main-box">Content</div>

// JS:
const boxEl = document.querySelector('.box'); // Selects the first .box element
console.log(boxEl.id); // Output: main-box
console.log(boxEl.className); // Output: box
console.log(boxEl.textContent); // Output: Content

QuerySelectorAll

querySelectorAll вибирає всі елементи, що відповідають CSS-селектору, і повертає статичний NodeList. На відміну від інших методів, він не оновлюється динамічно при зміні DOM.
Використання: Ідеально підходить для вибору кількох елементів із складними селекторами.
Повертає: Статичний NodeList елементів, який не оновлюється автоматично.

// HTML:
<p class="content">Paragraph</p>
<span class="content">Text</span>
<div class="content">Container</div>

// JS:
const contentEls = document.querySelectorAll('.content');
console.log(contentEls); // Output: NodeList(3) [p.content, span.content, div.content]
console.log(contentEls.length); // Output: 3

Відмінності між цими методами

Типи повернення

Динамічні та статичні колекції

CSS-селектори

Продуктивність

Практичний приклад: валідація форми

Комбінування цих методів у практичному сценарії: виділення некоректних полів форми за допомогою класів.

Метод getElementById вибирає елемент форми, тоді як querySelectorAll отримує всі поля введення з класом .input-field. Обробник події для події "submit" форми запобігає стандартній відправці та перевіряє кожне поле введення. Якщо поле порожнє, воно підсвічується червоною рамкою, а заповнені поля отримують зелену рамку, забезпечуючи користувачу миттєвий візуальний зворотний зв'язок.