Что такое DOM и как он структурирован?
DOM (Document Object Model) — это программный интерфейс, который предоставляет структурированное представление HTML или XML документа. DOM позволяет разработчикам взаимодействовать с содержимым, структурой и стилями веб-документа. Он является представлением документа в виде дерева, где каждый элемент, атрибут и текстовая нода являются объектами.
Структура DOM
Структура DOM представляется в виде иерархического дерева. Оно состоит из следующих типов узлов:
- Document: Корень дерева, представляющий весь HTML или XML документ.
- Element: Представляет HTML элементы (например,
<div>,<span>,<p>и т.д.). - Attribute: Представляет атрибуты элементов (например,
class,id). - Text: Представляет текстовое содержимое элемента.
Пример структуры DOM
Рассмотрим следующий HTML код:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Пример DOM</title>
</head>
<body>
<h1>Добро пожаловать на сайт!</h1>
<p>Это пример структуры DOM.</p>
<ul>
<li>Первый элемент списка</li>
<li>Второй элемент списка</li>
<li>Третий элемент списка</li>
</ul>
</body>
</html>
Представление в DOM
В представленном выше примере структура DOM будет выглядеть следующим образом:
Document
└── html
├── head
│ ├── meta
│ └── title
└── body
├── h1
├── p
└── ul
├── li (Первый элемент списка)
├── li (Второй элемент списка)
└── li (Третий элемент списка)
Работа с DOM в JavaScript
С помощью JavaScript разработчики могут манипулировать DOM, добавлять, изменять или удалять элементы. Например, чтобы изменить текст заголовка, можно использовать следующий код:
document.querySelector('h1').textContent = 'Привет мир!';
Или, чтобы добавить новый элемент в список:
const newListItem = document.createElement('li');
newListItem.textContent = 'Четвертый элемент списка';
document.querySelector('ul').appendChild(newListItem);
Заключение
DOM – это важный концепт в веб-разработке, поскольку он позволяет работе с документами динамически и интерактивно. Понимание его структуры и работы с ним — это ключ к созданию современных веб-приложений. В React работа с DOM осуществляется немного иначе через виртуальный DOM, но основополагающие принципы остаются теми же.