Russian Translation

JavaScript - Document Object Model (DOM)

Что такое DOM?

Document Object Model, сокращенно DOM, это программный интерфейс для HTML и XML документов. Он представляет структуру документа в виде древовидной иерархии объектов, где каждый объект соответствует части документа, такой как элемент, атрибут или текстовый узел.

JavaScript - HTML DOM

Представьте, что вы строите дом из кирпичей Lego. DOM похож на магический чертеж, который не только показывает, как построен дом, но и позволяет вам манипулировать и переставлять кирпичи с помощью JavaScript. Это мощный инструмент, которыйConnecting веб-страницы и языки программирования.

Основные концепции DOM

Узел (Node): Каждая часть документа является узлом. Элементы, атрибуты и текст являются различными типами узлов.
Древовидная структура: DOM представляет документ в виде дерева, с объектом document в корне.
Навигация (Traversal): Вы можете перемещаться по DOM-дереву с помощью различных методов и свойств.
Манипуляция (Manipulation): DOM позволяет вам изменять структуру, стиль и содержимое документа динамически.

Давайте рассмотрим простой пример, чтобы проиллюстрировать эти концепции:

<!DOCTYPE html>
<html>
<head>
<title>Мой первый пример DOM</title>
</head>
<body>
<h1 id="mainHeading">Добро пожаловать в мир DOM</h1>
<p>Это абзац текста.</p>
</body>
</html>

В этом HTML-документе DOM-дерево будет выглядеть примерно так:

document
└── html
├── head
│   └── title
│       └── "Мой первый пример DOM"
└── body
├── h1
│   └── "Добро пожаловать в мир DOM"
└── p
└── "Это абзац текста."

Что такое HTML DOM?

HTML DOM - это стандартная объектная модель и программный интерфейс для HTML. Он определяет:

HTML-элементы как объекты
Свойства всех HTML-элементов
Методы для доступа ко всем HTML-элементам
События для всех HTML-элементов

Сущность HTML DOM - это стандарт того, как получить, изменить, добавить или удалить HTML-элементы.

Работа с HTML DOM

Давайте рассмотрим некоторые comúnные операции с использованием HTML DOM:

Доступ к элементам

// Получить элемент по его ID
const heading = document.getElementById('mainHeading');

// Получить элементы по их тегу
const paragraphs = document.getElementsByTagName('p');

// Получить элементы по их классу
const highlights = document.getElementsByClassName('highlight');

// Использование querySelector для более сложных selectionов
const firstParagraph = document.querySelector('p');

В этих примерах мы используем различные методы для выбора элементов из нашего HTML-документа. Это как использовать магическую палочку, чтобы указать на конкретные части нашей веб-страницы!

Изменение содержимого

// Изменить текстовое содержимое элемента
heading.textContent = 'Добро пожаловать в чудесный мир DOM!';

// Изменить HTML-содержимое элемента
paragraphs[0].innerHTML = 'Этот абзац был <strong>изменен</strong>!';

Здесь мы обновляем содержимое наших элементов. Это как стереть и переписать части нашей веб-страници моментально!

Изменение стилей

// Изменить стиль элемента
heading.style.color = 'blue';
heading.style.fontSize = '24px';

Эти строки позволяют нам изменить вид заголовка, изменив его цвет и размер. Это как нанять fashion-дизайнера для ваших веб-элементов!

Создание и удаление элементов

// Создать новый элемент
const newParagraph = document.createElement('p');
newParagraph.textContent = 'Это новый созданный абзац.';

// Добавить новый элемент в документ
document.body.appendChild(newParagraph);

// Удалить элемент
document.body.removeChild(paragraphs[0]);

В этом примере мы играем роль архитектора веб-страницы - строим новые элементы и демонтируем старые несколькими строками кода!

Почему необходим DOM?

DOM необходим по нескольким причинам:

Динамические веб-страницы: Без DOM веб-страницы были бы статичными. DOM позволяет нам создавать интерактивные и динамические веб-опыты.
Разделение интересов: DOM предоставляет способ манипулировать содержимым и структурой веб-страницы с помощью JavaScript, сохраняя его отдельно от HTML и CSS.
Кросс-браузерная兼容имость: DOM предоставляет стандартный программный интерфейс, который работает в различных браузерах, обеспечивая一致性 в веб-разработке.
Обработка событий: DOM позволяет нам подключать обработчики событий к элементам, что позволяет нам реагировать на взаимодействия пользователей, такие как клики, нажатия клавиш и движения мыши.
AJAX и однопагивные приложения: DOM является важным для обновления частей веб-страницы без перезагрузки всей страницы, что является основой современных веб-приложений.

Давайте посмотрим пример, который объединяет многие из этих концепций:

<!DOCTYPE html>
<html>
<head>
<title>Список дел</title>
<style>
.completed { text-decoration: line-through; }
</style>
</head>
<body>
<h1>Мой список дел</h1>
<input type="text" id="newTodo">
<button id="addTodo">Добавить дело</button>
<ul id="todoList"></ul>

<script>
const newTodoInput = document.getElementById('newTodo');
const addTodoButton = document.getElementById('addTodo');
const todoList = document.getElementById('todoList');

addTodoButton.addEventListener('click', function() {
const todoText = newTodoInput.value;
if (todoText) {
const li = document.createElement('li');
li.textContent = todoText;

li.addEventListener('click', function() {
this.classList.toggle('completed');
});

todoList.appendChild(li);
newTodoInput.value = '';
}
});
</script>
</body>
</html>

Этот пример демонстрирует простое приложение списка дел. Он показывает:

Доступ к элементам с помощью DOM
Создание новых элементов
Модификацию содержимого и стилей элементов
Обработку событий
Динамическое обновление страницы без перезагрузки

Используя DOM, мы создали интерактивное приложение, которое реагирует на ввод пользователя и обновляется в реальном времени. Это сила DOM в действии!

Часто используемые методы и свойства DOM

Вот таблица некоторых часто используемых методов и свойств DOM:

Метод/Свойство	Описание
`getElementById()`	Возвращает элемент с указанным ID
`getElementsByClassName()`	Возвращает коллекцию элементов с указанным классом
`getElementsByTagName()`	Возвращает коллекцию элементов с указанным тегом
`querySelector()`	Возвращает первый элемент, соответствующий CSS-селектору
`querySelectorAll()`	Возвращает все элементы, соответствующие CSS-селектору
`createElement()`	Создает новый элемент
`appendChild()`	Добавляет нового ребенка
`removeChild()`	Удаляет ребенка
`innerHTML`	Получает или устанавливает HTML-содержимое элемента
`textContent`	Получает или устанавливает текстовое содержимое элемента
`style`	Получает или устанавливает.inline стиль элемента
`classList`	Позволяет манипулировать классами элемента
`addEventListener()`	Подключает обработчик событий к элементу

В заключение, DOM - это мощный инструмент, который оживляет веб-страницы. Он позволяет нам создавать динамичные, интерактивные опыты, которые реагируют на действия пользователей и обновляются в реальном времени. Поздравляю с началом вашего пути в веб-разработке, и вы найдете DOM незаменимым союзником в создании engaiging и responsive веб-приложений. Удачи в программировании!

Credits: Image by storyset

Предыдущий учебник:

JavaScript - ключевое слово var

Следующий учебник:

JavaScript - Методы DOM