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

Все, что мы рассмотрели о древообразной структуре XML и HTML до настоящего момента, именуется объектной моделью документа – Document Object Model (DOM).

Кроме описания логической структуры объектная модель документа также предоставляет объектно-ориентированный, платформенно-независимый программный интерфейс – API (Application Programming Interface), который позволяет программно управлять структурой, содержанием и отображением HTML-документов.

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

Как вы уже наверняка заметили, каждый узел дерева имеет свой тип, имя и значение. Тип есть у всех узлов, а вот имя или значение для некоторых типов узлов не имеет смысла. Какое имя должен иметь текстовый узел? Или какое значение должно быть у элемента? Чтобы частично решить эту проблему, W3C предложили использовать предопределенные и постоянные имена для узлов типа Text, Comment, Document, DocumentFragment и CDATASection. Например, именем любого текстового узла является «#text», а любого комментария – «#comment». Что касается значений, то они для некоторых узлов остаются неопределенными, со значением null. Ниже приведена таблица всех двенадцати типов узлов, их имен и значений.

Таблица 1 – Типы узлов DOM, их имена и значения

Программный интерфейс DOM представляет собой предопределенный набор объектов, их свойств и методов. Например, в JavaScript, объектом, который соответствует узлу типа документ, является document. Каждый объект узла имеет свойства nodeType, nodeName и nodeValue, с помощью которых можно узнать какого типа является данный узел, а также каково его имя и значение, соответственно. Манипулируя свойствами объектов-узлов можно не только определять их значения, но и изменять их. Причем каждое такое действие моментально повлияет на отображение этого объекта в браузере. Подобные манипуляции с объектной моделью документа также имеют название DHTML, сокращенно от Dynamic HTML.

Подводя итог вышесказанному, можно сделать вывод, что существует документ, структура которого подобна дереву. Это дерево состоит из узлов, которые взаимосвязаны между собой иерархической структурой. Структура дерева подчиняется некоторым правилам согласно типу документа. Таково логическое представление HTML. С другой стороны об HTML мы знаем как о некотором текстовом документе, содержащем смысловое наполнение и разметку в виде тегов. Возникает вопрос, каким же образом осуществляется переход между одной моделью в другую? Ответ состоит как минимум из двух утверждений. Во-первых, для веб-разработчика обе модели должны быть единым целым. Такой переход от одного к другому должен постоянно работать в сознании человека, работающего с HTML. Необходимо понимать, что HTML в виде текста и разметки это всего лишь его представление, проявление его логической древообразной структуры в структуру текстового файла. Во-вторых, существует программный переход от текстового представления HTML в его двойник – DOM, в виде структуры объектов. Такой переход делается каждый раз браузером, когда тот пытается обработать полученный документ и отобразить его. Этот процесс преобразования называется parsing. Существует и обратный переход от древообразной логической структуры документа в его текстовый эквивалент. Такое, например, происходит каждый раз при получении свойства innerHTML у элемента, только в этом случае мы видим не весь документ, а только его часть. Аналогичный процесс происходит при попытке сохранить на диске загруженный документ браузером Internet Explorer.

После того, как браузер обработал текстовый HTML-документ и построил DOM, он его отображает на экране. Однако не все узлы дерева имеют свое визуальное представление. Такие узлы как, например, Comment, не отображаются и отображаться не должны. Те же правила работают для узлов Document, DocumentType и для большинства узлов типа Attr. Что же касается Element, EntityReference и Text, то они могут отображаться в самых немыслимых формах, в зависимости от примененных к ним свойств отображения или так называемых стилей. Эти свойства отображения описываются при помощи CSS, и могут фигурировать как во внешнем CSS-файле, так и внутри HTML-документа в отдельной секции стилей или в качестве значения атрибута style. Согласно спецификациям HTML 4.01 и XHTML 1.0 Transitional существуют также специальные атрибуты, отвечающие исключительно за отображение элемента и его содержимого.

Сейчас мы подошли к очень серьезному вопросу – о границе разделения между содержанием HTML-документа и его отображением. Этот вопрос является камнем преткновения HTML-документов старого типа. Давайте рассмотрим эту тему более подробно.

Содержание и отображение

Для большинства людей вид документа, включая используемые в нем цвета, шрифты, отступы и пр. – является не менее значимым, чем текстовое содержание документа. Однако, как уже было сказано в самом начале этой главы, HTML должен отражать только семантическую структуру документа, и такой подход не предполагает включение в него какой бы то ни было информации об отображении. Напротив, все, что касается форматирования и отображения должно быть вынесено во вне, т.е. во внешний CSS-файл. HTML-код должен быть максимально «прозрачен» по своему содержанию, и не должен содержать элементы и атрибуты, ответственные за стиль отображения. Все это обусловлено требованиями спецификаций W3C, а также необходимостью соответствия стандартам доступности (accessibility).

С точки зрения семантики, главной целью HTML является необходимость отделить одни смысловые элементы от других, например, отделить заголовок от параграфа, гиперссылку от изображения. Помимо этого теги должны описывать характер содержащейся в них информации. Они несут в себе метаданные, т.е. информацию об информации. Значение одного и того же текстового фрагмента может быть иным в зависимости от того, какими тегами этот текст выделен. Например, текст внутри тега заголовка h1 и тот же текст внутри тега p будут иметь совершенно различный смысл. В первом случае это заголовок, а во втором – текст параграфа. Используя метаданные, любой человек, знающий HTML, сможет без труда определить, где в документе заголовок, где параграф, где элемент списка, а где ссылка на другой документ. И это вне зависимости от того, на каком языке этот документ составлен! И раз уж это настолько просто и очевидно, тоже самое сможет сделать и поисковый робот, а это, как уже обсуждалось выше, одно из немаловажных свойств современного HTML-кода.

Говоря об отображении, следует подчеркнуть, что практически каждый элемент имеет свой стиль отображения по умолчанию, который более-менее одинаков в различных браузерах. Например, элемент заголовка h1 обычно отображается крупным жирным шрифтом. Элемент strong – жирный шрифт нормального размера, а em – это курсив. Элемент a (гиперссылка) – как правило, это синий подчеркнутый текст. Помимо этого элементы также делятся на строчные и блочные. Они также могут характеризоваться наличием картинки фона, толщиной и цветом рамки, внутренними и внешними отступами, относительным или абсолютным позиционированием и т.д.

Любые свойства отображения элементов могут быть переопределены при помощи CSS. Это может быть сделано таким образом, что одни элементы становятся похожими на другие, приобретая самые различные формы. CSS-стили применимы к любому элементу, кроме элементов, которые не отображаются. К неотображаемым элементам относятся элементы head, meta, link, script, style, и другие. Некоторые элементы, как например ul, li и table, в дополнение к общим свойствам также имеют свои специфические, характерные только для них свойства.

С точки зрения CSS, каждый отображаемый элемент – это кирпичик, которому можно придать любую форму для того, чтобы он вписался в общий фасад строения документа. И это вне зависимости от того, какую смысловую нагрузку несет в себе тот или иной элемент. Визуальное пространство дизайна весьма обширно, и оно далеко не всегда созвучно строгой семантике HTML-кода внутри. Поэтому, отображение документа и его внутренняя структура – это две стороны одной медали. Вместе они составляют единое целое.

Теперь, несложно догадаться, что именно к CSS прилагаются основные усилия веб-разработчика при создании веб-страниц. Именно от CSS зависит выполнение основной задачи – правильное отображение документа в различных браузерах. В процессе разработки документа CSS-код становится все более сложным, в то время как HTML-код остается предельно простым.

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

Рассмотрим пример. Зачастую, при перечислении табличных данных следует поочередным образом подсвечивать строки для того, чтобы информация одной строки не сливалась с информацией другой строки. HTML позволяет определить цвет фона для строки таблицы при помощи атрибута bgcolor. Используя этот атрибут, получаем следующий фрагмент кода:

Определение цвета фона для строк таблицы с помощью атрибута bgcolor

<table>

<tr bgcolor="#FFFFEE">

<td>cell 1</td>

<td>cell 2</td>

</tr>

<tr>

<td>cell 1</td>

<td>cell 2</td>

</tr>

<tr bgcolor="#FFFFEE">

<td>cell 1</td>

<td>cell 2</td>

</tr>

. . .

</table>

Элемент table определяет таблицу. Элемент tr – это строка таблицы, и, соответственно, td – ячейка таблицы, в которой обычно находятся табличные данные. Наличие атрибута bgcolor в строке, означает, что вся строка будет подсвечена цветом, заданным в качестве значения этого атрибута.

Если нам необходимо изменить цвет подсветки, то сделать это придется для каждой строки с атрибутом bgcolor. А если в таблице больше сотни строк? Автозамена в текстовом редакторе? А если на сайте сотня страниц с таблицами? А если этот цвет еще где-нибудь присутствует на страницах, а изменять его не нужно? Недостаток очевиден.

И наконец, цвет фона строки, т.е. нечто, касающееся отображения, присутствует в HTML-коде страницы и противоречит современным требованиям документа. Для поисковых систем запись bgcolor=”#FFFFEE” не несет никакой смысловой нагрузки, для них это «мусор», информация, не имеющая никакой пользы.

Для того чтобы исправить ситуацию, информацию об отображении элемента следует вынести в CSS.

Правильная запись для подсветки строк таблицы

<table>

<tr class="odd">

<td>cell 1</td>

<td>cell 2</td>

</tr>

<tr>

<td>cell 1</td>

<td>cell 2</td>

</tr>

<tr class="odd">

<td>cell 1</td>

<td>cell 2</td>

</tr>

. . .

</table>

CSS с определением цвета фона для строки таблицы

tr.odd { background: #FFFFEE; }

Значение CSS свойства background, указанное после двоеточия – это и есть цвет подсветки. Запись tr.odd означает, что перечисленные свойства отображения будут применены ко всем элементам tr, у которых значение атрибута class равно «odd». В терминах CSS, эта запись называется селектором, а odd – классом элемента.

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

CSS с определением стилей для строки таблицы

tr.odd {

background: #FFFFEE;

color: #B60000;

}

Нужный цвет был добавлен при помощи свойства отображения CSS – color.

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

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

На смену таблицам пришли новые стандарты CSS и новые методы оптимизации HTML-кода для поисковых систем. Альтернативой ячейкам таблицы, как методу позиционирования элементов, сейчас служат элементы div, или любые другие элементы, в сочетании со свойствами форматирования CSS. CSS обладает набором средств, позволяющих манипулировать позицией элемента, достаточным для того, чтобы не использовать таблицы. Как следствие, различают так называемую «табличную» верстку, т.е. верстку с применением элемента table, и «бестабличную» – то есть верстка без применения элемента table. Очевидно, что бестабличная верстка имеет ряд преимуществ по сравнению с табличной, поскольку обладает всеми качествами, присущими современным веб-документам – это простота, доступность и гибкость при редактировании.

Возвращаясь к теме содержания и отображения, рассмотрим следующий пример. Допустим, у нас есть запись, которая повествует о некоей важной информации:

Фрагмент отображения выделенного текста

<strong>Некая важная информация</strong>

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

Несмотря на то, что элемент strong отображается жирным шрифтом по умолчанию, мы хотим еще как-нибудь выделить этот текст, чтобы он привлекал больше внимания. Сделать это можно, например, изменив его цвет на ярко красный. Как правило, первое, что приходит на ум новичку, знакомому с элементами HTML, это добавление тега font. Этот тег предназначен специально для того, чтобы изменять свойства шрифта. Цвет шрифта можно изменить, используя для этой цели специальный атрибут color, как это показано в следующем фрагменте кода:

Фрагмент отображения текста красным цветом при помощи тега font

<strong><font color=”red”>Некая важная информация</font></strong>

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

Альтернативным решением может послужить применение атрибута style. Этот атрибут позволяет задавать свойства отображения в HTML-коде непосредственно для элемента.

Фрагмент отображения текста красным цветом при помощи атрибута style

<strong style=”color:red”>Некая важная информация</strong>

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

Свойства отображения, заданные при помощи атрибута style имеют самый высокий приоритет, по сравнению со стилями, описанными в CSS, а также атрибутами характеризующими стиль элемента, такими как, например, bgcolor. Как следствие, свойство color:red будет невозможно переопределить во внешнем CSS-файле. То есть, если мы захотим изменить цвет отображаемого текста на какой-либо другой, то это можно будет сделать только непосредственно в HTML-коде, изменив значение атрибута style. Кроме этого, такая запись не несет семантической нагрузки и относится непосредственно к отображению, а не семантике документа.

В следующем примере мы попытаемся исправить ситуацию, соблюдая современные требования.

Фрагмент отображения текста красным цветом при помощи класса CSS

<strong class=”warning”>Некая важная информация</strong>

Фрагмент CSS

.warning {color:#f00}

Мы наконец-то вынесли все, что касается отображения в CSS, определив для этого класс warning. Да и имя класса выбрано в соответствии со смысловой нагрузкой того, к чему он относится. Он не назван «red» или «redtext», а именно «warning». Этим мы внесли дополнительный смысл в этот фрагмент HTML-кода. Теперь мы видим не просто абстрактный текст красного цвета, а именно предупреждение. И, разумеется, в дальнейшем у нас не возникнет проблем с изменениями стилей данного текста, аналогично тому, как это показано в первом примере.

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

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