Методичка по DOM

1 Вступ до DOM

Що таке DOM?

Document Object Model (DOM) - це програмний інтерфейс для HTML та XML документів. Він представляє структуру документа у вигляді дерева об'єктів, де кожен елемент є вузлом.

DOM дозволяє JavaScript змінювати структуру, стиль та вміст веб-сторінки.

Приклад DOM дерева

document (кореневий вузол)

html

head

body

div#container

h1.title

p

2 Вибір елементів

Методи вибору елементів

Існує кілька способів вибрати елементи DOM для подальшої роботи з ними.

// 1. getElementById - вибір за id
const elementById = document.getElementById('myId');

// 2. getElementsByClassName - вибір за класом
const elementsByClass = document.getElementsByClassName('myClass');

// 3. getElementsByTagName - вибір за тегом
const elementsByTag = document.getElementsByTagName('div');

// 4. querySelector - вибір першого відповідного елемента
const firstElement = document.querySelector('.myClass');

// 5. querySelectorAll - вибір всіх відповідних елементів
const allElements = document.querySelectorAll('div.myClass');

Тут з'являться результати виконання...

3 Навігація по DOM

Навігація між елементами

DOM надає властивості для переміщення між пов'язаними елементами.

// Почати з конкретного елемента
const element = document.querySelector('.start-element');

// Батьківські елементи
const parent = element.parentElement;
const closest = element.closest('.parent-class');

// Дочірні елементи
const children = element.children;
const firstChild = element.firstElementChild;
const lastChild = element.lastElementChild;

// Сусідні елементи
const nextSibling = element.nextElementSibling;
const previousSibling = element.previousElementSibling;

4 Маніпуляції з елементами

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

DOM дозволяє змінювати текст, HTML, атрибути та стилі елементів.

Інтерактивна демонстрація

Цей елемент можна змінювати

// Зміна текстового вмісту
element.textContent = 'Новий текст';
element.innerText = 'Інший текст';

// Зміна HTML вмісту
element.innerHTML = '<strong>Жирний текст</strong>';

// Робота з атрибутами
element.setAttribute('data-custom', 'value');
const value = element.getAttribute('data-custom');
element.removeAttribute('data-custom');

// Робота з класами
element.classList.add('new-class');
element.classList.remove('old-class');
element.classList.toggle('active-class');

// Зміна стилів
element.style.color = 'red';
element.style.backgroundColor = '#f0f0f0';
element.style.fontSize = '20px';

5 Робота з подіями

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

Події дозволяють реагувати на дії користувача (кліки, наведення, введення тексту тощо).

Демонстрація подій

Клікніть, наведіть курсор або натисніть клавішу

// Додавання обробника подій
element.addEventListener('click', function(event) {
    console.log('Елемент клікнуто!');
});

// Видалення обробника подій
function handleClick() {
    console.log('Обробник!');
}
element.addEventListener('click', handleClick);
element.removeEventListener('click', handleClick);

// Поширені типи подій
element.addEventListener('mouseover', handleMouseOver);
element.addEventListener('mouseout', handleMouseOut);
element.addEventListener('keydown', handleKeyDown);
element.addEventListener('submit', handleSubmit);