Что Такое DOM?

Дерево Документа

DOM (Document Object Model) — это тип структуры в виде дерева, используемый для представления документов HTML и XML. Он является основой современной веб-разработки, лежащей в основе всех языков стилизации и скриптов, таких как JavaScript и CSS.

На базовом уровне важно понимать, что дерево документа DOM содержит иерархию элементов и узлов: каждый элемент или узел содержит отдельные фрагменты данных, будь то текст, изображения, ссылки и т. д., которые все можно манипулировать с помощью кода. Каждый фрагмент кода, написанный в современной веб-среде, взаимодействует с элементами в дереве документов DOM; поэтому изучение основ этой структуры необходимо для любого начинающего веб-разработчика.

Элементы Узлы

Узлы элементов представляют собой отдельные элементы в дереве документа DOM. Они организованы в иерархическую структуру, где различные узлы представляют разные типы данных. Наиболее распространённым типом узлов элементов являются HTML-теги, такие как div или p, которые представляют отдельные секции или блоки кода на веб-странице.

Узлы элементов также могут содержать дополнительные атрибуты, такие как ID и class, которые позволяют разработчикам нацеливаться на конкретные части содержимого в их коде. Атрибуты узлов также могут использоваться для предоставления дополнительного контекста элементов, помогая разработчикам понять, как они стилизуются и манипулируются кодом.

В конечном итоге, все веб-разработки основываются на манипуляциях с этими узлами элементов; поэтому важно, чтобы начинающие понимали основы этих узлов, чтобы проектировать более сложные сайты и приложения.

Атрибуты Узлов

Attribute Nodes — это узлы в DOM, которые содержат специфическую информацию об элементе. Каждый узел атрибута содержит пару ключ-значение, где ключ — это имя атрибута, а значение — связанные с ним данные. Примеры таких пар ключ-значение включают идентификатор узла элемента (ключ=id, значение=специфический идентификатор элемента) или имя класса (ключ=class, значение=имя класса). Эти атрибуты предоставляют дополнительный контекст для разработчиков, помогая идентифицировать элементы на веб-страницах и манипулировать ими с помощью кода. Понимание того, как использовать эти атрибуты, необходимо для создания сложных веб-сайтов и приложений.

Текстовые Узлы

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

Кроме того, при манипуляции элементами с помощью кода JavaScript, элементы должны быть нацелены путем прохождения через дочерние узлы родительского узла – включая текстовые узлы – что может помочь определить подходящий элемент на странице для манипуляции.

Обработчики Событий

Обработчики событий позволяют нам указывать, какие действия должны быть выполнены, когда происходят определённые события внутри DOM, такие как клик по ссылке или наведение курсора мыши на элемент.  Используя обработчики событий, мы добавляем интерактивность на веб-сайт.  Мы добавляем обработчик событий к элементу, используя метод «addEventListener» и указывая, какой тип события следует отслеживать, а также какая функция должна быть выполнена, когда это событие обнаружено.

Строительные блоки веба

Знание DOM позволяет разработчикам создавать динамичные впечатления на сайте, позволяя пользователям взаимодействовать с элементами интуитивно понятными способами. Освоив основы DOM, разработчики смогут создавать сайты, которые будут более интерактивными и привлекательными, чем когда-либо прежде.