DOM: что это такое и как с ним работать

DOM (Document Object Model) preview

Введение:
DOM (Document Object Model) — это интерфейс для работы с HTML-документом. Он представляет структуру страницы в виде дерева объектов, каждый из которых соответствует тегу HTML. С помощью DOM разработчики могут динамически изменять содержимое страницы, стили, добавлять и удалять элементы, что делает веб-приложения интерактивными и гибкими. В этой статье мы разберем, как работает DOM, рассмотрим его структуру и примеры использования.

Что такое DOM?

Когда браузер загружает HTML-страницу, он создает иерархическую структуру из HTML-тегов, которая называется DOM-деревом. Каждый тег в HTML (например, <div>, <p>, <a>) становится узлом в DOM-дереве, иерархически связанным с другими узлами. Эта структура представляет собой «виртуальный» образ страницы, с которым можно взаимодействовать с помощью JavaScript.

Структура DOM-дерева

DOM-дерево состоит из следующих элементов:

1. Корневой узел — это самый верхний элемент, представляющий весь HTML-документ. Обычно он называется document.
2. Узлы элементов — каждый HTML-тег становится узлом (или нодой) в дереве, связанным с другими узлами через родительско-дочерние связи.
3. Текстовые узлы — содержат текст внутри тегов. Если внутри тега <p>Привет, мир!</p> есть текст, то в DOM-дереве для него создается отдельный текстовый узел.

Пример DOM-дерева для простого HTML:

Пример 1

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

DOM-дерево для примера 1

Взаимодействие с DOM с помощью JavaScript

JavaScript позволяет динамически изменять структуру и содержимое DOM-дерева, что делает страницы интерактивными.

Основные методы работы с DOM:

1. document.getElementById(id) — возвращает элемент с указанным id.
2. document.querySelector(selector) — возвращает первый элемент, соответствующий CSS-селектору.
3. document.querySelectorAll(selector) — возвращает все элементы, соответствующие CSS-селектору.
4. element.innerHTML — позволяет получить или установить HTML-содержимое элемента.
5. element.style.property — позволяет задать CSS-стиль для элемента.

Примеры работы с DOM

1. Изменение текста

Рассмотрим, как изменить текст в заголовке с id="header":

html

javaScript

2. Изменение стиля элемента

Пусть у нас есть параграф с class="text", который мы хотим стилизовать:

html

javaScript

3. Добавление нового элемента

Создадим и добавим новый элемент <p> в конец страницы:

javaScript

Навигация по DOM-дереву

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

• parentNode — возвращает родительский узел.
• childNodes — возвращает коллекцию всех дочерних узлов.
• firstChild и lastChild — возвращают первый и последний дочерний узел соответственно.
• nextSibling и previousSibling — возвращают соседние узлы на одном уровне.

Пример

Пусть у нас есть следующий HTML:

html

JavaScript-код для перебора всех элементов внутри <ul>:

javaSript

Изменение DOM в реальном времени: примеры и советы

1. Работа с классами элементов

Вы можете добавлять или удалять CSS-классы, что часто используется для манипуляции стилями:

javaScript

2. Удаление элементов

Для удаления элемента используйте метод remove():

javaScript

3. Обновление атрибутов

Метод setAttribute(attribute, value) устанавливает атрибут элемента:

javaScript

Заключение

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