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

Содержание

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

Объект window

• Объект navigator

• Объект location

• Объект history

• Объект screen

• Коллекция frames

• Некоторые методы объекта window

Объект document

• Объект body

• Коллекция all

• Коллекция anchors

• Массив images

• Коллекция forms

• Свойство cookie

• Поиск элемента по id

• Поиск групп элементов

• Программное создание, удаление и модификация 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 сами являются объектами. Рассмотрим важнейшие из них.