Document Object Model

Подведение итогов

Пришла пора в наших познаниях языка разметки гипертекстовых документов HTML переходить на новый уровень. Но перед этим нужно подвести итог всему тому, что мы изучили и, самое главное, как мы это изучили.

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

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

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

Если вы знакомы со структурой автомобиля, то быстро обнаружите неисправность; с компьютерной программой — без труда найдёте нужный инструмент (команду); с учебником или справочником — перед контрольной легко освежите в памяти пройденный материал. Поняв структуру документа любой сложности, вы легко и быстро сумеете его разметить элементами HTML.

Создайте в рабочей папке новую папку с именем task_02. В ней по шаблону создайте файл pouch.htm и назовите документ Форматирование. В тело документа добавьте статью с заголовком Структура документа и подзаголовок с текстом: Наконец-то мы окончательно и полностью разобрались с тем, что же такое семантика HTML.

С записью в коде заголовка статьи проблем не возникнет. А подзаголовок — обычный абзац. Таких в любом тексте большинство. Чтобы показать его отличие от остальных (особую приближённость к заголовку) понадобится ещё один элемент шапка. Если вы успешно выполняли предыдущие задания, то без труда решите и эту проблему. Не забудьте, что главный заголовок и подзаголовок — сведения о документе.

Если структурные отступы, открывающий и закрывающий теги элемента и его содержимое составит не более 80 символов, то записывать код можно в одну строку.

Пример двух видов записи блочных элементов: абзаца с коротким текстом — заголовок и с длинным — обычный.

········H1Текст и документ/H1
········P
Наконец-то мы окончательно и полностью разобрались с тем, что же такое
семантика HTML
········/P

Эпиграф получился слишком заносчивым. Неплохо было бы словосочетание окончательно и заменить словом почти. Чтобы читатель представил текст как диалог нужно показать движение мысли: вы высказались, заметили свою ошибку и исправили её. Не станем удалять намеченное словосочетание, а пометим его как удалённое.

Среди строчных элементов HTML имеется один с подходящей семантической ролью: удалённый фрагмент (загляните в свой справочник). Слово для замены тоже пометим, но как добавленный фрагмент. И для этого есть подходящий элемент HTML.

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

Текст документа

Собираем разрозненные сведения

В названии темы разделены два понятия Текст документа и сам Документ. Начнём с первого. Добавьте в статью раздел и его заголовок Текст документа. Сведений о разделе кроме заголовка нет, поэтому его не обязательно упаковывать в элемент шапка раздела.

Создаваемый код будет весьма сложен. Поэтому будьте внимательны при его записи. Следите за структурными отступами (количество пробелов). Иначе вы можете запутаться сами, запутать браузер и он покажет страницу совсем не похожую на ту, которая должна получиться.

Рассмотрим все текстовые фрагменты, изученные ранее, как объекты. Запишем их имена и свойства, которыми они обладают. Для записи воспользуемся неупорядоченным списком с произвольной последовательностью UL. Первая строка каждого пункта (элемент списка LI) отмечается маркером, роль которого может играть любой символ или изображение, кроме цифр и букв. Такой список называют маркированный.

В списках могут содержаться только пункты (элементы LI) и ничего больше. А вот сам пункт может содержать обычный текст или состоять из нескольких абзацев. Абзацев понадобится два. В первый поместим название текстового объекта, а в другой — описание его изменяемых свойств.

Начнём строить структуру с самого маленького текстового фрагмента Символ. В практических и самостоятельных работах браузер изменял свойства символов: шрифт, начертание (курсив, полужирный), размер, цвет. Давайте так и запишем. Создадим для названия фрагмента текста абзац и само название выделим строгим акцентом. Для описания свойств создадим другой абзац, а сами свойства выделим обычным акцентом. Вот так.

········UL
··········LI
············PSTRONGсимвол/STRONG/P
············P
свойства: EMшрифт, курсив, полужирный, размер, цвет.../EM
············/P
··········/LI
········/UL

Для определения важности написанного текста разметили: имя объекта сильным акцентом, а перечень свойств — обычным.

Следующий элемент — слово. Создадим для него отдельный список и поместим его прямо в пункт о символе над абзацем со словом символ, потому что слова состоят из символов.

········UL
··········LI
············UL
··············LI
················PSTRONGслово/STRONG/P
················P
свойства: EMсвойства символа + интервал между буквами…/EM
················/P
··············/LI
············/UL
············PSTRONGсимвол/STRONG/P
············P
свойства: EMшрифт, курсив, полужирный, размер, цвет…/EM
············/P
··········/LI
········/UL

Из слов составляются словосочетания и предложения. Добавим новый список в пункт над словом

········UL
··········LI
············UL
··············LI
················UL
··················LI
····················PSTRONGпредложение/STRONG/P
····················P
свойства: EMсвойства слова + интервал между словами…/EM
····················/P
··················/LI
················/UL
················PSTRONGслово/STRONG/P
················P
свойства: EMсвойства символа + интервал между буквами…/EM
················/P
··············/LI
············/UL
············PSTRONGсимвол/STRONG/P
············P
свойства: EMшрифт, курсив, полужирный, размер, цвет…/EM
············/P
··········/LI
········/UL

Абзацы создаются из предложений. Добавим ещё один список в пункте над предложением.

········UL
··········LI
············UL
··············LI
················UL
··················LI
····················UL
······················LI
························PSTRONGабзац/STRONG/P
························P
свойства: EMсвойства предложения + отступ или выступ первой строки…/EM
························/P
······················/LI
····················/UL
····················PSTRONGпредложение/STRONG/P
····················P
свойства: EMсвойства слова + интервал между словами…/EM
····················/P
··················/LI
················/UL
················PSTRONGслово/STRONG/P
················P
свойства: EMсвойства символа + интервал между буквами…/EM
················/P
··············/LI
············/UL
············PSTRONGсимвол/STRONG/P
············P
свойства: EMшрифт, курсив, полужирный, размер, цвет…/EM
············/P
··········/LI
········/UL

Что же у нас получилось? Получилась информационная модель системы Текст. Почему система? На странице не просто написаны имена объектов с их свойствами. Размещение их в структуре показывает связи между ними и взаимное влияние. В системе каждый элемент необходим и сам от неё зависит.

Особенности системы.

  1. Объекты, входящие в систему, называются элементами.
  2. Для каждого элемента определяется роль в системе.
  3. Между элементами устанавливаются связи, выстраиваются отношения взаимодействия и взаимовлияния.
  4. Устанавливается влияние свойств каждого элемента на систему в целом и обратное влияние системы на каждый элемент.

Состояние системы определяется не только значениями её собственных свойств, но и значениями свойств её объектов-частей.

Системный подход

Сначала для рассмотрения был взят не весь текст целиком, а самый маленький объект — Символ. Из символов составляется объект — Слово. Он наследует свойства Символа. Можно размер букв изменить сразу у всех символов слова. В тоже время объект Слово обладает новым свойством, которого у Символа не было — интервал между буквами.

То же можно сказать и об объектах Предложение, и Абзац. То есть наша система Текст состоит из объектов, которые в свою очередь тоже являются системами. Слово для системы Предложение является подсистемой, а Абзац — надсистемой.

Изучение элементов сложного объекта, определение их взаимодействия и взаимовлияния, называется Системный подход.

Мы живём в огромном Мире и постоянно сталкиваемся в нём с чем-то новым и неизвестным. Прячемся от страха в знакомое привычное (сбегаем с уроков или заявляем: такого не может быть), либо с интересом это изучаем.

Метод синтез

Редко кто помнит то время, когда ему исполнился год. Вам тоже когда-то был год. И вы, как и все дети этого возраста, «тащили в рот» всё, что попадалось на вашем пути.

Ребёнок от рождения начинает изучать этот новый Мир. Но пользуется он лишь доступными для него методами: делит окружающие предметы на съедобное — несъедобное, или на маленькое (поместится в рот) — большое (не поместится).

Мы, стараясь узнать способы управления внешним видом текста, стали рассматривать его как перевёрнутую детскую пирамидку. Собирали из самых маленьких объектов всё более сложные. Такой метод в системном подходе называется Синтез.

Вы довольно часто пользуетесь методом Синтез. Например, изучая подаренный смартфон, выясняете, куда и сколько вставить сим-карт, куда cd-карту, какой размер памяти, ёмкость батареи и другие особенности.

Вы помните правила набора текста? Там тоже применён этот метод. Рассмотрев особенности символа пробел и то, как программа интерпретирует его, правила сформировались сами собой. И запомнились… не то, что записанные в конспект под диктовку. Знания лучше носить в голове, а не в портфеле (АБ).

У вас что-то не получается с учёбой? А ведь каждый учебный предмет — это система. Примените к ним метод Синтез: определите элементы системы (определения, правила, формулы, теоремы и т. п.), их взаимоотношение и взаимовлияние. Может быть, придётся вернуться на год-два назад, найти то место, почему-то пустое, где должны быть нужные знания… У вас получится. И в мире для вас одной тайной станет меньше.

Документ

Разбираем по частям

Применим уже знакомый системный подход к изучению документа как объекта. Рассмотрим Документ в виде системы объектов. Определим связи между ними и свойства каждого. Оценим, как они влияют на другие объекты и на систему в целом.

И бумажные, и электронные документы имеют много общего. Общую для них информационную модель продолжим создавать в том же документе. Но теперь в своих рассуждениях пойдём от большого к малому. Добавьте в статью ещё один раздел с заголовком «Документ».

Первый самый крупный объект документа — Лист. В бумажной книге Лист имеет размер, ориентацию, качество бумаги и т. п.

В электронном виде — его роль выполняет рабочая область браузера. На больших экранах её можно растягивать и сжимать, на смартфонах она очень маленькая.

С листом разобрались. Добавим сведения о нём в код.

········UL
··········LI
············PSTRONGлист/STRONG/P
············P
свойства: EMразмер, ориентация…/EM
············/P
··········/LI
········/UL

Бумажный лист состоит из двух объектов Страница. Если это, конечно, не лист Мёбиуса (забавно, но у него только одна сторона). У листа имеются поля, колонтитулы, фон… В колонтитулах содержатся сведения о самой странице, о разделе, о документе, об авторе и т. п.

У веб-страниц поля могут отсутствовать, особенно на малых экранах. А роль колонтитулов выполняют шапка, подвал и другие элементы HTML.

········UL
··········LI
············PSTRONGлист/STRONG/P
············P
свойства: EMразмер, ориентация…/EM
············/P
············UL
··············LI
················PSTRONGстраница/STRONG/P
················P
свойства: EMполя, место под колонтитулы, фон…/EM
················/P
··············/LI
············/UL
··········/LI
········/UL

На странице основной объект Статья или Материал. Бумажная страница содержит часть текста Статьи (рассказа, параграфа…).

На веб-странице Статья размещается целиком. Но кроме неё, как правило, есть инструменты и дополнительные сведения. Это и меню для перехода по странице и другим страницам сайта, блоки дополнительных сведений, сопутствующих содержанию статьи, рекламные блоки и т. д. Поэтому на веб-странице для Статьи важным свойством является размещение её среди дополнительных блоков.

········UL
··········LI
············PSTRONGлист/STRONG/P
············P
свойства: EMразмер, ориентация…/EM
············/P
············UL
··············LI
················PSTRONGстраница/STRONG/P
················P
свойства: EMполя, место под колонтитулы, фон…/EM
················/P
················UL
··················LI
····················PSTRONGстатья, материал/STRONG/P
····················P
свойства: EMразмещение…/EM
····················/P
··················/LI
················/UL
··············/LI
············/UL
··········/LI
········/UL

Статья и в бумажном, и в электронном документе состоит из элементов Абзац. Мы уже знаем, что Абзац — смысловой фрагмент. Смысл помогает определить его роль. Каждой роли соответствует определённой оформление, выбранное дизайнером.

Кроме уже известных из модели Текст свойств абзаца (шрифт, размер, начертание…), к ним добавляются выравнивание строк, отступы от левого и правого полей листа и от соседних элементов, интервалы между абзацами и между строками внутри него.

········UL
··········LI
············PSTRONGлист/STRONG/P
············P
свойства: EMразмер, ориентация…/EM
············/P
············UL
··············LI
················PSTRONGстраница/STRONG/P
················P
свойства: EMполя, место под колонтитулы, фон…/EM
················/P
················UL
··················LI
····················PSTRONGстатья, материал/STRONG/P
····················P
свойства: EMразмещение…/EM
····················/P
····················UL
······················LI
························PSTRONGабзац/STRONG/P
························P
cвойства: EMинтервалы перед, после и между строк, отступы левой
и правой границ, шрифт…/EM
························/P
······················/LI
····················/UL
··················/LI
················/UL
··············/LI
············/UL
··········/LI
········/UL

Это информационная модель системы Документ. Причём для её построения был использован совсем другой метод.

Документ, как система, рассматривался не с мелких элементов, собирая из них очередной крупный. Наоборот — разбирался на более мелкие, определяя их свойства. Подобный метод называется Анализ.

Здесь тоже видны не только структурные связи, но взаимные влияния и зависимости элементов друг от друга. Ориентация и размер листа (маленький или большой) влияют на размер полей страницы. От них зависит размещение материала, которое влияет на отступы и интервалы абзацев. А дальше от перечисленных свойств по цепочке зависят и свойства текста: размер шрифта, расстояние между словами и символами…

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

Если вы это поняли, то уже готовы перейти к следующему этапу: оформление документа и знакомство с понятием дизайн. Но это чуть позже.

Классификация

Так почему всё-таки модели две?

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

А когда читаем Текст нас уже мало интересует ширина строки, расстояние между абзацами, порядковые номера страниц в колонтитулах и т. п. оформительские элементы. Даже слова читаем целиком и не видим отдельных букв, если, конечно, читаем не по слогам.

На самом деле система объектов одна. Мы разделили все объекты этой системы на два класса по их основному признаку и составили две модели. В одной представлены свойства строчных элементов, а в другой — блочных.

Это ещё один метод познания и называются он Классификация. Вы, может быть, и не задумывались, но постоянно пользуетесь этим инструментом.

  • На уроках ботаники, зоологии, биологии классифицируете растения и животных по разным признакам: по способу выведения потомства, по территориальному месту обитания и т. д.
  • На уроках физики вы классифицируете природные явления и описываете их математическим языком.
  • На уроке химии… и на других уроках. Продолжите фантазировать сами.
  • И в быту тоже. Ваши уличные кроссовки лежат не в шкафу с чистым постельным бельём. Кухонная посуда не на книжной полке рядом с книгами…

Обе информационные модели описывают один и тот же объект, но с разных сторон. Чтобы получить полную информационную модель Документ, их нужно объединить.

Поместите в коде раздел Документ перед разделом Текст документа. И поменяйте название статьи на: Информационная модель документа.

Структурный метод

Методы познания Синтез, Анализ и Классификация помогли построить информационную модель Документ. А её структурная форма показала, как отдельные фрагменты документа увязаны в единое целое. Мало что нового вы узнали о документах, но познакомились с интересными мыслительными инструментами. Давайте попробуем их применить к коду нашего документа HTML в файле pouch.htm.

Не будем рассматривать свойства элементов и обращать внимание на их взаимные зависимость и влияние. Нас будут интересовать только межэлементные связи. Кто на каком уровне глубины расположен, как он соотносится с другими элементами. То есть, у нас должна получиться структура кода. Для этого в папке task_02 создайте обычный текстовый файл frame.txt. В нём запишите название Объектная модель документа.

В коде есть элемент HTML. Он и элемент рассматриваемой системы, и, в то же время, элемент языка HTML. Так и будем называть всё элементами, подразумевая одновременно и то, и другое.

HTML содержит в себе только два элемента HEAD и BODY. Про HEAD на данном этапе мы знаем достаточно, но ещё не раз будем возвращаться к нему, узнавая что-то новое. В данной задаче он нам не интересен.

Сразу перейдём к BODY, не забывая о структурном отступе (2 пробела). В нём только один элемент — статья ARTICLE. А в ней три элемента: шапка статьи HEADER и два раздела SECTION 1 и SECTION 2. Так и запишем их в отдельных строках с одинаковым количеством структурных отступов.

└► HTML └► BODY └► ARTICLE ├► HEADER │ ├► H1 │ └► P ├► SECTION 1 └► SECTION 2

В шапке у нас 2 элемента: абзац-заголовок статьи H1, и обычный абзац P с ролью подзаголовок. В построении структуры участвуют только блочные элементы. Поэтому на строчные элементы не будем обращать внимания.

Рассмотрим структуру первого раздела SECTION 1. В нём только два элемента: абзац-заголовок раздела H2 и маркированный список UL 1.1.

В списке UL 1.1 единственный пункт перечисления LI 1.1. В нём два обычных абзаца P и ещё один вложенный маркированный список LI 1.2. Во вложенном списке опять пункт с двумя обычными абзацами и ещё один вложенный список… и далее всё повторяется ещё два раза. В конечном итоге у вас должно получиться примерно так.

│ ├► SECTION 1 │ ├► H2 │ └► UL 1.1 │ └► LI 1.1 │ ├► P │ ├► P │ └► UL 1.2 │ └► LI 1.2 │ ├► P │ ├► P │ └► UL 1.3 │ └► LI 1.3 │ ├► P │ ├► P │ └► UL 1.4 │ └► LI 1.4 │ ├► P │ └► P │

Структура второго раздела начинается так же, как и у первого: заголовок раздела и первый маркированный список. В каждом повторяющемся списке по пункту с двумя абзацами и вложенным маркированным списком. Но выглядят они иначе.

Если вы научились читать код, то построение структуры не составит труда. В каждом пункте вложенный список со своей подструктурой находится перед абзацами. Вот так.

│ └► SECTION 2 ├► H2 └► UL 2.1 └► LI 2.1 ├► UL 2.2 │ └► LI 2.2 │ ├► UL 2.3 │ │ └► LI 2.3 │ │ ├► UL 2.4 │ │ │ └► LI 2.4 │ │ │ ├► P │ │ │ └► P │ │ ├► P │ │ └► P │ ├► P │ └► P ├► P └► P

Третий фрагмент завершает построение общей структуры кода. У вас в файле все три фрагмента должны быть единой древовидной структурой.

Объектная модель документа HTML

DOM

Для анализа взят документ HTML. Пройдя по коду сверху вниз построена модель его древовидной структуры. Она основана на связях объектов HTML. То, что получилось, называется объектная модель документа.

А как браузер поступает с документом, показывая нам веб-страницу?

  1. Читая в оперативной памяти открывающий и закрывающий теги вместе с содержимым, превращает их в элемент.
  2. Помещает элемент на место в структуре DOM. Это определяет, какие элементы влияют на его свойства и на свойства каких будет влиять он.
  3. Наделяет элемент заранее определёнными свойствами, например, увеличивает левый отступ.
  4. И в конце выводит его на экран в конкретном месте страницы.

Посмотрите, как это у него получается. Распахните браузер на весь экран. Нажмите клавишу F12. У браузера отобразится блок Инструменты веб-разработчика.

Убедитесь, что в инструментах отображается панель Инспектор DOM и сверните панель Свойств. Она нам пока не нужна. Пощёлкайте по треугольникам слева от названия тегов и оцените, как браузер представляет ваш документ.

То, что показал браузер, сокращённо называется латинскими буквами DOM. Аббревиатура расшифровывается так: Document Object Model, или по-русски — объектная модель документа. Именно так мы и назвали структуру в файле.

Теперь сравните, похоже ли то, что построили вы, на то, что построил браузер? Это очень важно! Ваше видение структуры документа должно совпадать с интерпретацией её браузером!

Команды браузер будет выполнять не над тем документом, который представляете себе вы, а над тем, который «видит» он.

Анализ структуры кода HTML

Применим метод анализ к объектной модели документа. Подобные древовидные структуры называются иерархическими. В них каждый элемент имеет непосредственные связи с некоторыми элементами. И, в то же время, опосредованные — со всеми остальными.

Такие связи описывают, как в структуре семейного (генеалогического) дерева, и дают элементам соответствующие названия.

Рассмотрим маркированный список UL 1.2. Под ним в подчинении находится один ребёнок, он же потомок на первом уровне — пункт LI 1.2. В то же время для пункта-ребёнка LI 1.2 список UL 1.2 является родителем или первым предком. Между ними установлена непосредственная связь.

Тот же LI 1.2 сам является родителем (первым предком) для трёх своих детей (потомков на первом уровне) — это два абзаца P и вложенный маркированный список UL 1.3. Но у этих детей-элементов, кроме предка-родителя есть и бабушки-дедушки UL 1.2, прабабушки-прадедушки и более древние родственники LI 1.1 , UL 1.1, SECTION 1, ARTICLE и так вплоть до BODY. Для LI 1.2 они тоже предки, но между ними связь опосредованная — через других предков.

Подобные отношения элементов работают не только вверх по структуре, но и вниз. Для LI 1.3 два P и UL 1.4 — его дети. Они же потомки на первом уровне с непосредственной связью. А вот LI 1.4 со своими детьми для него — потомки с опосредованной связью.

Есть и другие отношения между элементами. В первом разделе SECTION 1 дети у любого LI пара абзацев P и UL — родственники, так как у них общий родитель и они находятся на одном уровне. Но, например, в разделе SECTION 2 следующий по вертикали вниз за UL 2.2 первый абзац P для него не только родственник, но и сосед, потому что они расположены рядом на одном уровне.

Структура и родственные связи

Давайте в разных фрагментах кода рассмотрим «семейные» узы разных элементов. Начнём с P в первом разделе и будем считать его текущим элементом.

... │ └► LI ..............предок ├► P └► UL ...........предок └► LI ........родитель, первый предок ├► P ......родственник ├► P ....родственник (текущий элемент) └► UL .....родственник, сосед └► LI ├► P ├► P │ ...

Теперь рассмотрим родственные связи во втором разделе элемента UL вместе с его подструктурой.

... │ ├► P └► LI ................ предок ├► UL ............. предок │ └► LI .......... родитель, первый предок │ ├►UL ...... родственник (текущий элемент) │ │ └► LI .... ребёнок, потомок на первом уровне │ │ ├► P .. потомок │ │ └► P .. потомок │ ├► P ........ родственник, сосед │ └► P ........ родственник ├► P └► P

Пример результата анализа структуры

В документе файла pouch.htm после заголовка первого уровня (элемент H1) следует обычный абзац (элемент P), которому определена роль подзаголовок. Чтобы браузер различал его среди остальных обычных абзацев, они оба помещены в шапку (элемент HEADER).

Зная, что браузер работает с DOM, в коде можно просто указать, что подзаголовок P сосед элемента H1. Сколько бы абзацев ни следовало за заголовком, сосед у него всегда только один — первый из них. В этом случае можно упростить код HTML не добавляя лишний элемент HEADER.

Все эти родственные отношения между элементами очень пригодятся для управления их внешним видом и поведением, используя правила CSS.