Розуміння DOM: Посібник для початківців з маніпуляції веб-сторінкою - javascript.org.ua

Модель об'єкта документа (DOM) є основою сучасної веб-розробки. Це інтерфейс, який дозволяє розробникам отримувати доступ, змінювати та взаємодіяти зі структурою, стилем і контентом HTML-документів. Якщо ви коли-небудь цікавилися, як JavaScript робить веб-сторінки динамічними, DOM — це відповідь. Давайте розглянемо основи DOM та з’ясуємо, як це працює з практичними прикладами.

Що таке DOM?

DOM представляє вашу веб-сторінку як структуроване дерево вузлів. Ці вузли відповідають елементам, атрибутам та тексту в вашому HTML. Наприклад, простий HTML фрагмент, як цей:








Welcome!
This is a paragraph.
        ```  буде представлений в DOM як:

html
- head
  - title
- body
  - h1
  - p
```
Кожен елемент тут є вузлом.

Основні концепції DOM

1. Вузли

Все в DOM є вузлом. Основні типи вузлів включають:

Елементи вузлів: представляють HTML-елементи, такі як <h1> або <p>.
Атрибути вузлів: представляють атрибути елементів, такі як class="example".
Текстові вузли: представляють текст всередині елементів.

2. Деревоподібна структура

DOM організовує вузли в ієрархічну структуру. Наприклад:

Батьківські вузли: містять інші вузли (наприклад, <html> є батьківським для <head> та <body>).
Дочірні вузли: містяться в батьківському вузлі (наприклад, <h1> є дочірнім для <body>).
Сиблінгові вузли: мають одного спільного батька (наприклад, <h1> і <p> є сиблінгами).

Доступ до елементів DOM

Щоб маніпулювати елементами, спочатку потрібно їх вибрати. Ось кілька поширених методів:

1. `document.getElementById()`

Вибирає елемент за його id:

Hello!

2. `document.querySelector()`

Вибирає перший елемент, який відповідає CSS-селектору:

First paragraph.
Second paragraph.

3. `document.querySelectorAll()`

Вибирає всі елементи, які відповідають CSS-селектору:

Item 1
Item 2

4. `document.getElementsByClassName()`

Вибирає елементи за їх ім’ям класу:

Box 1
Box 2

5. `document.getElementsByTagName()`

Вибирає елементи за їх ім’ям тегу:

Paragraph 1
Paragraph 2

Маніпулювання елементами DOM

Після того, як ви вибрали елемент, можна його змінювати.

1. Зміна вмісту

element.textContent: Оновлює текст всередині елемента:

Original Text

element.innerHTML: Оновлює HTML-контент всередині елемента:

2.

Зміна атрибутів

element.setAttribute(): Встановлює новий атрибут або оновлює існуючий:

element.getAttribute(): Отримує значення атрибута:

3. Зміна стилів

Безпосередньо змінює стиль елемента:


Style me!

4. Додавання/видалення класів

element.classList.add(): Додає клас:

element.classList.remove(): Видаляє клас:

box.classList.remove("highlight");

element.classList.toggle(): Перемикає клас:

box.classList.toggle("active");

Створення та видалення елементів DOM

1. Створення елементів

Використовуйте document.createElement() для створення нового елемента:

Використовуйте document.createTextNode() для створення тексту:

const textNode = document.createTextNode("Hello, world!");  
newDiv.appendChild(textNode);

2. Додавання елементів

const container = document.getElementById("container");  
container.appendChild(newDiv);

3. Видалення елементів

container.removeChild(newDiv);

Обробка подій в DOM

1. Що таке події?

Події — це дії або події, такі як кліки, натискання клавіш або відправка форми. JavaScript дозволяє вам реагувати на ці події.

2. Додавання прослуховувачів подій (Event Listeners)

Click me

3. Поширені події

Деякі часто використовувані події включають:
- click
- mouseover
- mouseout
- keydown
- keyup
- submit

Ключові методи для навігації по DOM

Батьківський елемент: element.parentNode або element.parentElement.
Дочірні елементи: element.childNodes або element.children.
Сиблінги: element.previousSibling і element.nextSibling.

Опанування DOM є необхідним для створення динамічних, інтерактивних веб-сторінок. З цими основними концепціями ви готові до створення захоплюючих користувацьких інтерфейсів!

Перекладено з: Understanding the DOM: A Beginner’s Guide to Webpage Manipulation