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

Что такое объектная модель документа (DOM)?

Объектная модель документа это программный интерфейс (что-то вроде API) для HTML документов. DOM это структурное представление документа, которая определяет то, как с этим документом будут взаимодействовать программы на JavaScript, файлы стилей и т.п. Например, возьмём простой HTML документ:


<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<h1>Тестовый документ</h1>
	<div class="content">Контент сайта</div>
</body>
</html>

После считывания документа браузером, в памяти браузера будет создана объектная модель для этого HTML файла, которая будет выглядеть примерно так:
  • document
    • html
      • head
        • meta
        • title
      • body
        • h1
        • div

По сути это древовидная структура HTML документа состоящая из узлов (html-тегов), каждый из которых обладает набором характеристик и методов для взаимодействия с ним.


Организация занимающаяся стандартизацией языка HTML определяет стандарты работы с DOM. На данный момент существует 2 стандарта W3C DOM и WHATWG DOM, которые реализованы во всех современных браузерах. Некоторые браузеры предлагают дополнительные расширения к указанным стандартам, поэтому перед использованием того или иного расширения, следует удостовериться в его работоспособности в популярных браузерах.

К примеру стандарт DOM указывает браузеру что метод getElementById() из кода ниже, должен вернуть узел HTML документа с заданным идентификатором:


//Получим корзину пользователя
var cartDiv = document.getElementById('userCart');

Все методы, свойства, а так же доступные события (например клик мышки по кнопке или наведение курсора на элемент) доступны в виде объектов. Например объект document — представляет объект самого документа. Через него можно к примеру можно получить доступ к событию загрузки документа, а например объект table необходим для работы с HTML-таблицами и т.п.. Полный перечень доступных объектов можно найти в документации к HTML.

Поток документа HTML

По умолчанию, браузер выводит элементы на страницу по порядку, так, как они описаны в исходном коде HTML документа. Если вы не применили к элементам никаких CSS стилей меняющих поведение элементов, то такой вывод будет являться нормальным потоком.

Все элементы веб-страницы имеют набор CSS стилей по умолчанию. И с точки зрения поведения в потоке разделяются на 3 группы, а именно:

  1. блочные элементы
  2. строчные элементы
  3. блочно-строчные элементы

За поведение элементов в этом ключе отвечает CSS свойство display.

Блочные элементы по умолчанию занимают 100% ширины родителя (обычно всей страницы) и воспринимают CSS свойства влияющие на внутренние и внешние отступы элемента.

Блочный элемент

Строчные элементы напротив не занимают 100% ширины их ширина зависит от содержимого элемента (например текста). Такие элементы располагаются по несколько в строке, пока не заполнят 100% ширины экрана (или родителя), далее они «переходят» на следующую строку. Строчные элементы не восприимчивы к CSS стилям влияющим на отступы элемента.

Строчный элемент


Блочно-строчные элементы, своего рода гибрид. Они ведут себя как строчные элементы, заполняя родительский элемент по ширине в зависимости от содержимого, но при этом блочно-строчные элементы «понимают» CSS стили отступов.

Блочно-строчныйэлемент

При помощи CSS можно менять поведение элемента в потоке. Существует несколько базовых свойство которые отвечают за это:

  1. display — позволяет сделать элемент блочным, строчным или блочно-строчным
  2. position — позволяет изъять элемент из потока и закрепить его жёстко относительно экрана или родительского элемента.
  3. float — задаёт выравнивание элемента, а так же определяет как его будет «обтекать» соседние элемент, по сути тоже изымает элемент из нормального потока

Хочется добавить что display с недавнего времени пополнился таким значением как flex, т.е. гибкие блоки. Это очень полезный набор CSS свойств который позволяет удобно и валидно верстать адаптивные макеты. Мы рассмотрим детальнее каждый из приёмов в последующих статьях. Это лишь вводный материал и нужен он для того чтобы вы увидели «слона в тумане», так сказать имели общее представление на старте, а дальше мы заполним его деталями и у вас сложится чёткая картина того, как тут всё устроено.


Не пропусти свежие посты, подпишись:
Полезная статья?
(Голосов: 1, Рейтинг: 3.3)
Курсы от партнёров
Хотите освоить востребованную профессию? Воспользуйтесь предложениями от наших партнёров. Пройдите учебный курс по одному из популярных IT направлений.

Все курсы партёнров
Вам также могут понравиться
Кем можно работать в сфере веб-разработки

Кем можно работать в сфере веб-разработки

Хотите начать работать в сфере веб-разработки, но не знаете с чего можно начать? Читайте описание самых популярных веб-профессий, с их описанием, обязанностями и ориентировочными зарплатами.

CSS курсоры

CSS курсоры

В статье рассмотрены возможности изменения курсоров пользователя при помощи CSS

Работа с регистром строк в php

Работа с регистром строк в php

В статье рассмотрены примеры работы с регистром строк в языке PHP, проверка регистра, изменение, инверсия


Комментарии
Защита от автоматических сообщений
CAPTCHA
Введите слово на картинке