Когда вы посещаете веб-страницу, вы видите красивый дизайн, интерактивные элементы и полезный контент. Но как все это работает? Ответ на этот вопрос кроется в DOM (Document Object Model) — внутренней структуре веб-страницы. В этой статье мы углубимся в мир DOM, изучим его структуру и иерархию, и научимся работать с его различными узлами. Давайте начнем наше путешествие внутрь DOM!

Навигация по статье

Структура DOM и его иерархическая организация

DOM — это модель объектов, которая представляет веб-страницу. Он состоит из различных элементов, которые образуют иерархическую структуру. В самом верху иерархии находится корневой элемент, который обычно является <html>. Корневой элемент содержит другие элементы, такие как <head> и <body>, которые в свою очередь могут содержать другие элементы или узлы. Эта иерархическая организация позволяет нам легко навигировать по структуре страницы и взаимодействовать с ее содержимым.

Вот пример структуры DOM для простой веб-страницы:

html
└─── head
│     └─── title
│           └─── Титульное название страницы
│
└─── body
      └─── h1
      │     └─── Привет, мир!
      │
      └─── p
      │     └─── Это пример веб-страницы.
      │
      └─── img
      │     └─── src: "image.jpg"
      │     └─── alt: "Изображение"
      │
      └─── div
            └─── span
                  └─── Текст внутри span

Узлы DOM

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

Элементы: Это основные строительные блоки веб-страницы, такие как <div>, <p> или <h1>. Они представляются объектами и могут содержать другие элементы или текстовые узлы.
Атрибуты: Элементы могут иметь атрибуты, которые предоставляют дополнительную информацию о элементе. Например, атрибут «src» в теге <img> указывает на источник изображения.
Текстовые узлы: Они содержат текстовое содержимое элемента, например, текст между тегами <p>…</p>.
Комментарии: Комментарии используются для добавления пояснений или временного исключения кода. Они представляются в DOM как комментарий узла.

Пример кода:

<!DOCTYPE html>
<html>
  <body>
    <h1 id="title">Заголовок</h1>
    <p>Привет, <span class="name">Мир</span>!</p>
    <!-- Это комментарий -->
  </body>
</html>

Древовидная структура DOM и отношения между узлами

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

Конечно! Давайте подробнее рассмотрим древовидную структуру DOM и отношения между узлами.

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

Отношения между узлами в DOM включают:

Родительский узел (parent node): Каждый узел, кроме корневого элемента, имеет родительский узел. Родительский узел — это узел, который содержит данный узел. Например, для элемента <body> родительским узлом будет корневой элемент <html>.
Дочерние узлы (child nodes): Узел может иметь один или несколько дочерних узлов. Дочерние узлы — это узлы, которые находятся непосредственно внутри данного узла. Например, у элемента <body> могут быть дочерние узлы в виде <h1>, <p>, <img> и <div>.
Первый дочерний узел (first child node): Это первый дочерний узел, который находится внутри данного узла. Например, первым дочерним узлом для элемента <body> может быть <h1>.
Последний дочерний узел (last child node): Это последний дочерний узел, который находится внутри данного узла. Например, последним дочерним узлом для элемента <body> может быть <div>.
Соседний узел (sibling node): Узлы, находящиеся на одном уровне в дереве DOM, называются соседними узлами. Например, <h1>, <p>, <img> и <div> являются соседними узлами внутри элемента <body>. Узлы с одним родительским узлом считаются соседними.

Пример кода:

// Получение доступа к родительскому узлу
var titleElement = document.getElementById("title");
var parentElement = titleElement.parentNode;
console.log(parentElement.nodeName); // Выведет "BODY"

// Получение доступа к дочерним узлам
var paragraphElement = parentElement.querySelector("p");
var childElements = paragraphElement.childNodes;
console.log(childElements.length); // Выведет количество дочерних узлов, включая текстовые узлы

// Получение доступа к соседним узлам
var spanElement = paragraphElement.querySelector(".name");
var nextSiblingElement = spanElement.nextSibling;
console.log(nextSiblingElement.nodeName); // Выведет "#text"