Одними из критически важных тем в изучении 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С-Битрикс

Объективно о преимуществах и недостатках 1С-Битрикс

С развитием интернета появилось много платформ, которые помогают начинающим бизнесменам создать и сделать рентабельным и успешным интернет-магазин. Но подобрать действительно эффективную площадку не так-то просто. Что необходимо знать, чтобы не прогореть, какой тип платформы выбрать. Об этом поговорим в этой статье.

Авторизация на сайте при помощи Вконтакте

Авторизация на сайте при помощи Вконтакте

Большинство социальных сетей позволяют использовать свои API для авторизации пользователей на сайте имеющих аккаунт в данной социальной сети. В статье рассмотрен способ авторизации при помощи API вконтакте.ру.

Исключения в PHP, что это и как ими пользоваться

Исключения в PHP, что это и как ими пользоваться

В этой статье вы узнаете что такое исключения в PHP и как их использовать для обработки ошибок. Начиная с PHP версии 5.0 стала доступна новая модель обработки ошибок, так называемые исключения. Она позволяет более гибко и информативно для пользователя обрабатывать не стандартные ситуации в работе вашего приложения. 


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