Динамический HTML и Объектная Модель Документа

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

DHTML не является технологией самой по себе, это продукт взаимодействия трех родственных и взаимодополняющих технологий: языка HTML, каскадных таблиц стилей (CSS) и языка сценариев (JavaScript или VBScript). Для предоставления сценариям доступа к HTML и CSS содержимое документа представляется в виде дерева объектов в программной модели, известной под названием Объектная Модель Документа (Document Object Model, DOM).

Динамические стили – одно из ключевых преимуществ DHTML, и DOM модель предоставляет программный доступ к стилям, позволяя изменять стили элементов и создавать новые стилевые правила.

Программный интерфейс (API) DOM модели является фундаментом DHTML, именно через DOM API программист может управлять практически любым элементом HTML-документа. Каждый элемент документа, видимый или невидимый, представляет собой отдельный объект, обладающий свойствами, связанными с атрибутами элемента, и методами, выполняющими некоторые действия. DOM модель позволяет также отслеживать действия пользователя, такие как движения и щелчки мыши или нажатия на клавиши. Любое такое действие генерирует событие, которое может быть перехвачено и передано функции-обработчику.

Программный доступ к элементам

HTML-тэг элемента определяет тип сопоставленного ему объекта. Отдельные экземпляры объектов в документе могут идентифицироваться по их уникальному идентификатору (атрибуту/свойству id ), имени (атрибуту/свойству name ) или положению в дереве элементов DOM модели. Кроме этого есть ряд важнейших объектов, которые не имеют собственных тэгов. Это такие объекты как window (окно браузера), document (HTML-документ, загруженный в окно или фрейм), event (событие).

Объект window

Объект window является вершиной иерархии. Все остальные объекты являются дочерними или более отдаленными потомками объекта window. Браузер создает, как правило, единственный объект window, когда открывает документ в окне, однако если документ содержит фреймы (элементы frame и iframe ), то дочерние объекты window создаются также для каждого фрейма. Доступ к дочерним окнам возможен через коллекцию frames родительского окна. Дочерние окна зависимы от состояния родительского окна. Например, закрытие родительского окна приводит к закрытию всех дочерних окон. Нет необходимости указывать объект window для вызова его свойств или методов, если вызов относится к текущему окну. Например, инструкции window.close() и close() идентичны.

Многие свойства объекта window сами являются объектами. Рассмотрим важнейшие из них.

Объект navigator

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

• userAgent содержит строку, которая передается в HTTP заголовке на веб-сервер с каждым запросом. Эта строка содержит информацию о самом браузере и его версии, операционной системе и ее версии и некоторую дополнительную информацию. Пример:

  document.write(navigator.userAgent);
    /*
    Результат в Internet Explorer 8.0
    Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; GTB6.4; 
  .NET CLR 1.1.4322; .NET CLR 2.0.50727; InfoPath.1; 
  .NET CLR 3.0.04506.648; .NET CLR 3.5.21022; InfoPath.2; .NET CLR 3.0.4506.2152;
   .NET CLR 3.5.30729; OfficeLiveConnector.1.3; OfficeLivePatch.0.0)
    */
    /*
    Результат в Mozilla Firefox 3.6
    Mozilla/5.0 (Windows; U; Windows NT 5.1; ru; rv:1.9.2) Gecko/20100115 Firefox/3.6 (.NET CLR 3.5.30729)
    */
    /*
    Результат в Apple Safari
    Mozilla/5.0 (Windows; U; Windows NT 5.1; ru-RU) 
     AppleWebKit/531.9 (KHTML, like Gecko) Version/4.0.3 Safari/531.9.1
    */
• appName содержит имя браузера – "Microsoft Internet Explorer" или "Netscape" для многих других браузеров.
• appCodeName – "Mozilla" для большинства браузеров
• appVersion, appMinorVersion, platform, systemLanguage и другие содержат информацию о версии браузера и операционной системы, языковые настройки и другое.

Объект location

Объект location содержит полную информацию об адресе ( Universal Resource Locator, URL) открытой страницы. Доступны также все отдельные детали URL, такие как протокол передачи данных, имя сервера, порт, через который осуществляется доступ, путь к файлу на сервере, строка запроса и закладка внутри страницы. Рассмотрим для примера следующий адрес: http://www.MyServer.ru:80/examples/samplecodes.aspx?code=html&level=1#location.

• href содержит всю строку URL ( http://www.MyServer.ru:80/examples/samplecodes.aspx?code=html&level=1#location )
• protocol – протокол передачи данных ( http:)
• host – имя сервера + порт ( www.MyServer.ru:80 )
• hostname – имя сервера ( www.MyServer.ru )
• port – порт ( 80 )
• pathname – путь ( /examples/samplecodes.aspx )
• search – строка запроса ( ?code=html&level=1 )
• hash – закладка, ссылка внутри страницы ( #location )

Свойство href является свойством по умолчанию. Две следующие инструкции идентичны.

location = 'http://www.microsoft.com';
window.location.href = 'http://www.microsoft.com';

Присвоение значения объекту location (как в приведенном примере) немедленно открывает заданный URL в текущем окне.

Объект history

Объект history (история) содержит информацию об адресах, посещенных пользователем с момента открытия браузера. Из соображений безопасности действительные адреса недоступны, имеются лишь три метода для перемещения по индексу на страницу относительно текущей.

• back() – переход на предыдущую страницу. Эквивалентно нажатию кнопки "Назад" в браузере.
• forward() – переход на следующую страницу. Эквивалентно нажатию кнопки "Вперед" в браузере.
• go(N) – переход на N позиций в индексе. history.go(-1) эквивалентно history.back(), history.go(1) эквивалентно history.forward(). При попытке выйти за границы индекса не возникает ошибки; браузер остается на текущей странице.

Объект screen

Объект screen содержит информацию о мониторе: ширина ( width ), высота ( height ), глубина цвета ( colorDepth ), выраженная как число бит на пиксель, и другие. Если у пользователя несколько мониторов, отображаются данные того, в котором открыт браузер (или его большая часть).

Коллекция frames

Коллекция frames содержит объекты, соответствующие элементам frame и iframe. Каждый такой объект содержит свой объект window.