Оволодіння маніпуляцією з DOM за допомогою JavaScript

Якщо ви коли-небудь замислювались, як вебсайти динамічно оновлюють контент, змінюють стилі або реагують на дії користувачів без перезавантаження сторінки, відповідь полягає в DOM (Document Object Model). Незалежно від того, чи ви новачок у розробці, чи просто цікавитесь магією, що стоїть за сучасними веб-додатками, розуміння DOM є необхідним. Давайте розберемося і дізнаємось, як маніпулювати DOM за допомогою JavaScript, крок за кроком.

Що таке DOM?

DOM — це як креслення вашої веб-сторінки. Коли браузер завантажує HTML-документ, він створює деревоподібну структуру, де кожна частина сторінки — від заголовків до зображень — представлена як вузол. Ця структура дозволяє JavaScript взаємодіяти зі сторінкою і робити її динамічною.

Ось приклад:

Welcome!
This is a simple webpage.
       ```  У DOM цей HTML перетворюється на дерево, де тег `` є коренем, а `` і `` — його діти.  

## Основні компоненти DOM

1. **Document**: Початкова точка дерева DOM, що представляє всю веб-сторінку.
2. **Elements**: Вузли, які представляють HTML-теги, як-от `div`, `p` або `a`.
3. **Attributes**: Властивості всередині елементів, такі як `id`, `class` або `src`.
4. **Text Nodes**: Містять текстовий вміст всередині елементів.

## Вибір елементів у DOM

Щоб маніпулювати елементами, спочатку потрібно їх вибрати. JavaScript пропонує кілька методів для цього:

- **За ID**:

const title = document.getElementById('title');
```

• За класом:

const descriptions = document.getElementsByClassName('description');

• За тегом:

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

• За допомогою Query Selectors:

const title = document.querySelector('#title'); // Вибирає перший збіг  
const allDescriptions = document.querySelectorAll('.description'); // Вибирає всі збіги

Зміна контенту

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

const title = document.getElementById('title');  
title.textContent = 'Hello, World!'; // Оновлює текст  


title.innerHTML = 'Hello, World!'; // Додає HTML

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

JavaScript дозволяє безпосередньо змінювати стиль елемента або його класи:

const title = document.getElementById('title');  
title.style.color = 'red'; // Змінює колір тексту  
title.style.fontSize = '24px'; // Змінює розмір шрифту

Додавання або видалення елементів

Ви можете динамічно створювати або видаляти елементи:

// Додавання нового елемента  
const newElement = document.createElement('div');  
newElement.textContent = 'This is a new div';  
document.body.appendChild(newElement);  

// Видалення елемента  
const title = document.getElementById('title');  
title.remove();  



// Додавання або видалення класу  
const paragraph = document.querySelector('.description');  
paragraph.classList.add('highlight');  
paragraph.classList.remove('description');

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

Зробіть вашу веб-сторінку інтерактивною, реагуючи на дії користувачів:

const button = document.createElement('button');  
button.textContent = 'Click Me';  
document.body.appendChild(button);  


button.addEventListener('click', () => {  
 alert('Button clicked!');  
});

Перехід та навігація

Переміщайтесь по дереву DOM, щоб взаємодіяти з пов’язаними елементами:

const list = document.querySelector('ul');  
const firstItem = list.firstElementChild; // Перший дочірній елемент  
const parent = list.parentElement; // Батьківський елемент  
const nextSibling = firstItem.nextElementSibling; // Наступний елемент-сусід

Управління формами та введенням

Робота з формами — це поширене завдання.
Ось як ви можете обробляти введення користувача:

const input = document.createElement('input');  
input.type = 'text';  
input.placeholder = 'Enter your name';  
document.body.appendChild(input);  



const button = document.createElement('button');  
button.textContent = 'Submit';  
document.body.appendChild(button);  
button.addEventListener('click', () => {  
 alert(`Hello, ${input.value}!`);  
});

Кращі практики

1. Організуйте свій код: Тримайте код маніпуляцій з DOM чистим і модульним.
2. Мінімізуйте доступ до DOM: Доступ до DOM може бути повільним, кешуйте елементи, коли це можливо.
3. Використовуйте сучасні інструменти: Для складних проєктів варто розглянути використання бібліотек на кшталт React або фреймворків, як-от Vue.js.

Висновок

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

Перекладено з: Mastering DOM Manipulation with JavaScript