Троицкий Д.И. Интернет-технологии1 BOM- И DOM-ОБЪЕКТНЫЕ МОДЕЛИ БРАУЗЕРА Лекция 12 Кафедра «Автоматизированные станочные системы» Dept. of Automated Manufacturing. - презентация

1 Троицкий Д.И. Интернет-технологии1 BOM- И DOM-ОБЪЕКТНЫЕ МОДЕЛИ БРАУЗЕРА Лекция 12 Кафедра «Автоматизированные станочные системы» Dept. of Automated Manufacturing Systems

2 Троицкий Д.И. Интернет-технологии2 За окно браузера отвечает так называемая BOM-модель (Browser Object Model), а за Web-страницу – DOM-модель (Document Object Model). Для обращения из программы на JavaScript и других языках к отдельным элементам как Web-страницы, так и окна браузера используются два набора встроенных объектов со свойствами, методами и событиями. Коллекция – динамический массив, хранящий ту или информацию или ссылки на объекты. Например, все теги документа хранятся в коллекции тегов, все изображения – в коллекции images и т.д.

3 Троицкий Д.И. Интернет-технологии3 Иерархическая структура объектной модели ВОМ BOM - объектная модель браузера

4 Троицкий Д.И. Интернет-технологии4 Объект document. Обладает коллекциями и свойствами, представляющими все содержимое HTML-документа. Кроме того, предоставляет методы и события для работы с документами. Объект history. Содержит информацию об URL-адресах страницы, посещенных клиентом, хранящуюся в журнале браузера. Позволяет сценарию перемещаться по журналу. Объект event. Глобальный объект, позволяющий программе обращаться к параметрам события. Объект location. Содержит информацию о текущем URL. Предоставляет методы, позволяющие перезагрузить страницу. Объект MimeType. Предоставляет информацию о типе данных MIME текущей страницы. Основные объекты браузера Объект navigator. Этот объект представляет собой браузер и содержит информацию о его производителе, версии и возможностях.

5 Троицкий Д.И. Интернет-технологии5 Объект screen. Предоставляет сценарию информацию о разрешающей способности и графических возможностях монитора клиента. Объект Selection. Возвращает активный выделенный участок на экране. Предоставляет доступ к выделенным элементам, в том числе к тексту страницы. Объект Style. Предоставляет доступ к отдельным стилевым свойствам элемента, которые заранее заданы таблицей стилей или строковым стилевым тегом на странице. Объект Stylesheet. Этот объект представляет все стили одной таблицы стилей из коллекции stylesheets. Объект TextRange. Этот объект представляет текстовый поток HTML- документа. Он может быть использован для чтения и записи текста в пределах страницы. Объект window. Этот объект ссылается на текущее окно, которое может быть как окном верхнего уровня, так и кадром, созданным с помощью тега в другом документе.

6 Троицкий Д.И. Интернет-технологии6 Коллекции браузера ИмяОписание allКоллекция всех тегов и элементов в теле документа anchorsКоллекция всех тегов документа appletsКоллекция всех объектов в документе, включая встроенные элементы управления, изображения, апплеты, внедренные модули и т. д. areasКоллекция всех активных областей, входящих в состав карты-изображения cellsКоллекция всех ячеек и в строке таблицы elementsКоллекция всех управляющих и прочих элементов формы embedsКоллекция всех тегов в документе filtersКоллекция всех объектов-фильтров для элемента formsКоллекция всех форм на странице framesКоллекция всех кадров, определенных в теге

7 Троицкий Д.И. Интернет-технологии7 Коллекции браузера (продолжение) ИмяОписание imagesКоллекция всех изображений на странице importsКоллекция всех иллюстрированных таблиц стилей, определенных для Stylesheet linksКоллекция всех ссылок и блоков на странице mimeTypesКоллекция всех типов документов и файлов, поддерживаемых браузером optionsКоллекция всех пунктов в списке pluginsПсевдоним для коллекции всех тегов на странице rowsКоллекция всех строк в таблице, включая, и scriptsКоллекция всех блоков на странице stylesheetsКоллекция всех объектов стилевых свойств документа

8 Троицкий Д.И. Интернет-технологии8 DOM - объектная модель документа Объектная модель документа (Document Object Model – DOM) является стандартом и регламентирует способ представления содержимого документа (в частности Web-страницы) в виде набора объектов. Под содержимым понимается все, что может находиться на странице: рисунки, ссылки, абзацы, текст и т.д. В отличие от объектной модели браузера (BOM), которая уникальна для каждого браузера, объектная модель документа является стандартна и должна поддерживаться всеми браузерами. В DOM документ представляется в виде древовидной структуры. Это обеспечивает унифицированный способ навигации по документу.

9 Троицкий Д.И. Интернет-технологии9 Представление HTML-документа в виде древовидной структуры

10 Троицкий Д.И. Интернет-технологии10 Иерархия объектов DOM-модели Язык JavaScript имеет доступ ко всем этим объектам (фактически, они являются встроенными объектами Java).

11 Троицкий Д.И. Интернет-технологии11 В модели DOM к элементу документа можно обратиться непосредственно по его идентификатору id, воспользовавшись методом getElementById объекта Document. Например: Основы DOM Основы DOM A Text var a = document.getElementById("head");

12 Троицкий Д.И. Интернет-технологии12 Для получения коллекции всех элементов, соответствующих какому-либо тегу, используется метод объекта Document getElementsByTagName. Например, команда var a = document.getElementsByTagName("TD") присвоит переменной a коллекцию всех элементов. Имя элемента (тега) следует писать прописными буквами ("TD"). Чтобы воспользоваться преимуществом древовидной структуры, принятой в DOM для представления документа, следует использовать навигационные атрибуты.

13 Троицкий Д.И. Интернет-технологии13 Навигационные атрибуты объекта Node

14 Троицкий Д.И. Интернет-технологии14 АтрибутОписание firstChildВозвращает первый узел-потомок lastChildВозвращает последний узел-потомок previousSiblingВозвращает предыдущий соседний узел, имеющий с текущим одного родителя nextSiblingВозвращает следующий соседний узел, имеющий с текущим одного родителя parentNodeВозвращает родительский узел ownerDocumentВозвращает корневой узел документа, содержащий текущей узел nodeNameВозвращает имя узла nodeValueВозвращает значение узла в текстовом формате nodeTypeВозвращает тип узла в виде числа Навигационные атрибуты объекта Node

15 Троицкий Д.И. Интернет-технологии15 Часто требуется динамически формировать Web-страницы, например, в случае создания чатов, форумов, либо динамически создаваемых Web- страниц, содержимое которых хранится в базе данных. Использование DOM позволяет решить такую задачу. Для создания объектов у объекта Document имеются следующие методы МетодОписание createElement(имя_элемента)Создает новый узел элемента с указанным именем createTextNode(текст)Создает текстовый узел с указанным текстом createAttribute(имя_атрибута)Создает новый узел атрибута с указанным именем Динамическая генерация Web-страниц средствами DHTML на основе DOM

16 Троицкий Д.И. Интернет-технологии16 Вновь созданные объекты добавляются в структуру документа при помощи методов объекта Node. МетодОписание appendChild(новый_узел) Добавляет объект Node в конец списка узлов-потомков cloneNode(потомок-опция) Создает объект Node, идентичный указанному в аргументе. В качестве аргумента можно использовать и все узлы-потомки одновременно hasChildNodes() Возвращает true, если узел имеет потомков insertBefore(новый_узел, текущий_узел) Вставляет объект Node в список потомков перед узлом, указанным в качестве второго параметра removeChild(узел-потомок) Удаляет узел-потомок, указанный в качестве параметра replaceChild(новый_потомок, старый_потомок) Заменяет старого потомка на нового

17 Троицкий Д.И. Интернет-технологии17 Пример динамической генерации документа var newText; var newElem; newText = document.createTextNode ("Пример динамического создания HTML-документа"); newElem = document.createElement("H1"); newElem.appendChild(newText); document.body.appendChild(newElem); newText = document.createTextNode("Абзац"); newElem = document.createElement("P"); newElem.appendChild(newText); document.body.appendChild(newElem); Пример динамической генерации документа средствами DOM:

18 Троицкий Д.И. Интернет-технологии18 Для чтения и установки атрибутов используются следующие методы объекта Element. МетодОписание getAttribute (имя_атрибута) Возвращает значение атрибута setAttribute(имя_атр ибута, значение) Устанавливает значение атрибута removeAttribute (имя_атрибута) Устанавливает значение атрибута по умолчанию, удаляя текущее значение

19 Троицкий Д.И. Интернет-технологии19 Как правило, программы для Web-страниц управляются событиями. Чтобы узнать, какое событие произошло, в DOM имеется объект события event. Объект event является локальным и его следует явным образом передавать в обработчик события СвойствоОписание bubbles Указывает возможность «всплывания» события (передачи управления вверх по иерархической структуре) cancelable Указывает возможность отмены действия события, заданного по умолчанию currentTarget Указывает событие, обрабатываемое в данный момент eventPhaseУказывает фазу возбуждения события targetУказывает элемент, вызвавший событие timestampУказывает время возникновения события typeУказывает имя события События, связанные с мышью, генерирует объект mouse.