4 подписчика

Document Object Model (объектная модель документа)

24 февраля 202524 фев 2025

2 мин

Каждый сайт в интернете можно просмотреть не только в виде оформленной страницы с картинками, но и в текстовом виде HTML. Именно из этого кода мы будем извлекать необходимую информацию. Первое, что вам следует знать, — это DOM (Document Object Model) — набор правил, согласно которым формируется каждая веб-страница с использованием языка разметки HTML. DOM хранит структуру сайта в виде дерева и информацию, заключённую в тегах. Каждый элемент этого дерева называется узлом. Как вы скоро увидите на практике, узлы могут иметь неограниченную вложенность. Однако не рекомендуется делать эту вложенность слишком глубокой: чем больше уровней, тем сложнее ориентироваться в коде и тем медленнее работает страница. Вложенность тегов HTML можно сравнить с вложенностью обычных папок на вашем компьютере. Отличие заключается в том, что каждый узел DOM имеет своё название, атрибуты и специфическую функцию. Например, тег <title></title> указывает браузеру, какое название должно быть у вашей страницы на вк

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

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

Вложенность тегов HTML можно сравнить с вложенностью обычных папок на вашем компьютере. Отличие заключается в том, что каждый узел DOM имеет своё название, атрибуты и специфическую функцию. Например, тег <title></title> указывает браузеру, какое название должно быть у вашей страницы на вкладке браузера, как его следует обработать и какие могут быть у него атрибуты.

Пример структуры HTML страницы:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Интернет-магазин</title>

<style>

/* CSS для оформления карточки товара */

.product-card {

border: 1px solid #ccc;

padding: 15px;

width: 300px;

}

.product-title {

font-size: 1.2em;

}

.product-price {

color: #e44d26;

}

</style>

</head>

<body>

<h1>Каталог товаров</h1>

<div class="product-card" id="product-1">

<h2 class="product-title">Название товара</h2>

<img src="product-image.jpg" alt="Изображение товара" width="100">

<p class="product-description">Описание товара, которое подробно расскажет о его характеристиках.</p>

<p class="product-price">Цена: 1000 руб.</p>

<button type="button" onclick="addToCart('product-1')">Добавить в корзину</button>

</div>

</body>

</html>

В данном примере:

<title> задаёт название веб-страницы, отображаемое в вкладке браузера.
В разделе <style> прописаны CSS-правила для оформления карточки товара, но чаще всего они стили располагаются в отдельном файле.
Карточка товара оформлена в теге <div> с классом product-card и уникальным идентификатором id="product-1".
<h2> используется для указания названия товара, и этому тегу присвоен класс product-title.
Тег <img> отображает изображение товара. Атрибуты src и alt задают путь к изображению и альтернативный текст соответственно.
<p> с классом product-description и product-price используются для отображения описания и цены товара.
Кнопка "Добавить в корзину" реализована с помощью тега <button>, атрибут onclick которого запускает JavaScript-функцию addToCart.

Каждый тег в этом примере — это узел в DOM-дереве. Узлы могут иметь любые атрибуты (например, src="product-image.jpg" для тега <img>) и вложенные узлы (например, <h2> вложен в <body>).

Дерево DOM служит нам инструментом для поиска нужного элемента на странице и взаимодействия с ним.

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