Знакомство с css

Лекция №10. Объектные модели документа JavaScript


План:
1. Объекты и величины.
2. Объектная модель JavaScript.
3. Свойства и методы.


Аннотация: В данной лекции описывается объекты и величины. Циклы, их назначение, виды, создание и применение в программах.
Опорные слова: Объекты и величины, объектная модель javascript, свойства и методы
Понятия объектных моделей браузера, документа
Цель поддержки браузерами скриптовых языков — обеспечить возможность изменения состояния браузера или документа, загруженно- го в браузер с помощью клиентских сценариев. Для того чтобы скрипт мог взаимодействовать с браузером, ему должен быть предоставлен некий программный интерфейс. Наиболее удобно такой интерфейс реализуется в виде совокупности объектов, экспортируемых ядром исполнения сценариев в глобальную область имен скрипта. Традиционно объекты этого набора объединяются в иерархию с древовидной структурой. В этой иерархии одни объекты являются свойствами других. Структура такой иерархии называется объектной моделью браузера.
Объектные модели различных браузеров, конечно же, различаются. Однако в процессе их эволюции образовалась некоторая устоявшаяся структура. Она представлена на рис. 4.1.
window
document frames history location navigator
Иерархия объектов в модели документа (DOM)
Рис. Схема объектной модели браузера

Как видно из рисунка, в качестве корня иерархии объектной модели выступает объект window. С помощью некоторых свойств и методов этого объекта можно манипулировать окном документа. Среди свойств window есть такие полезные объекты, как, например, navigator, frames, history. Особого внимания среди них заслуживает объект document.

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

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

Итак, уже говорилось о том, что W3C DOM определяет API для доступа к HTML- и XML-документам. Важным моментом является то, что спецификация DOM не требует от приложений какой-то конкретной структуры организации данных документа. Вместо этого она определяет API как набор интерфейсов. В данном контексте интерфейс представляет собой абстракцию, описывающую схему доступа и взаимодействия со специфическим для приложения внутренним представлением документа. Таким образом, W3C DOM на логическом уровне определяет принципы управления структурой и данными документа.
Работа с реализациями интерфейсов в широком смысле и, в частности, с реализациями интерфейсов DOM-модели в различных языках программирования осуществляется по-разному. Применительно к JavaScript, ядро исполнения сценариев DOM-совместимых браузеров отображает атрибуты и методы интерфейсов объектной модели в соответствующие свойства и методы объектов иерархии дерева документа (хотя для других языков, например, атрибуты могут представляться парой функций getValue/setValue).
Заглянув в спецификацию DOM любого уровня, можно видеть, что она состоит из нескольких разделов. Всегда присутствует раздел "DOM Core", описывающий ядро объектной модели — общий набор интерфейсов, программного манипулирования содержимым и структурой документа. В других разделах описываются расширения DOM, позволяющие решать определенный круг задач, такие, например, как: "DOM CSS" (интерфейсы программного управления правилами таблиц стилей CSS), "DOM Events" (обработка событий модели документа) и т. д. Одно из таких расширений — "DOM HTML" представляет для нас особый интерес, т. к. определяет набор интерфейсов DOM, специфичных для документов HTML.