Що таке DOM?
DOM (Document Object Model) — це інтерфейс програмування, який представляє структуру HTML або XML документів у вигляді дерева об'єктів. DOM дозволяє JavaScript взаємодіяти з вмістом веб-сторінки, змінювати її структуру, стиль та поведінку.
Основні особливості DOM
- Дерево вузлів:
DOM представляє документ у вигляді дерева вузлів, де кожен вузол відповідає елементу, атрибуту або тексту. 2. Динамічні оновлення:
DOM дозволяє змінювати вміст і структуру документа без перезавантаження сторінки. 3. Інтерфейс для JavaScript:
Використовуючи DOM API, ви можете змінювати елементи сторінки, їх стилі, додавати або видаляти елементи.
Приклад дерева DOM
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<h1>Hello, DOM!</h1>
<p>This is an example.</p>
</body>
</html>Робота з DOM
Ось приклад того, як використовувати DOM API для зміни вмісту сторінки.
HTML:
<h1 id="title">Welcome</h1>
<button id="changeText">Change Text</button>JavaScript:
// Get the heading element and button
const title = document.getElementById("title");
const button = document.getElementById("changeText");
// Add click handler
button.addEventListener("click", () => {
title.textContent = "Text changed!";
});Основні методи DOM
document.getElementById(id)— отримати елемент за ID.document.querySelector(selector)— отримати перший елемент, що відповідає CSS селектору.document.querySelectorAll(selector)— отримати всі елементи, що відповідають CSS селектору.element.textContent— змінити текст елемента.element.innerHTML— змінити HTML вміст елемента.element.style— змінити стилі елемента.
Порада:
DOM API — це потужний інструмент, але для складних завдань використовуйте сучасні бібліотеки, такі як React, щоб спростити роботу з інтерфейсом.
Коротка відповідь
Для співбесідиКоротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.