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

В дополнение к статье о создании собственного типа пользовательских полей хочу рассказать как делать аналогичные свойства для информационных блоков, т.к. эти свойства относятся к другому модулю, а именно «информационные блоки» (iblock).

Условные операторы в PHP

Условные операторы в PHP

Добрались до логики выполнения программы. И так условные операторы (по другому операторы ветвления) позволяют нам организовать определённое поведение программы в зависимости от входных параметров (данных вводимых пользователем, результатом работы вспомогательных функций). Вся логика в языках программирования основана на Алгебре Буля. 

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

Самые читаемые

Тонкая настройка SEO для результатов фильтрации каталога битрикс

Тонкая настройка SEO для результатов фильтрации каталога битрикс

Одним из преимуществ интернет-магазинов на 1С Битрикс на мой взгляд является наличие не так давно до...

Основы SEO оптимизации сайта

Основы SEO оптимизации сайта

Эта статья не истина в последней инстанции, а лишь набор правил которые я применяю при создании/испр...

Собственный тип пользовательских полей в 1С Битрикс

Собственный тип пользовательских полей в 1С Битрикс

Для решения некоторых задач порой не хватает стандартного набора пользовательских полей поставляемых...