Toni_Dev 
15.06.2023 
0 
525 Когда вы посещаете веб-страницу, вы видите красивый дизайн, интерактивные элементы и полезный контент. Но как все это работает? Ответ на этот вопрос кроется в 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"
Комментарии
0