Презентация на тему BOM- И DOM-ОБЪЕКТНЫЕ МОДЕЛИ БРАУЗЕРА

Презентация на тему Презентация на тему BOM- И DOM-ОБЪЕКТНЫЕ МОДЕЛИ БРАУЗЕРА, предмет презентации: Разное. Этот материал содержит 19 слайдов. Красочные слайды и илюстрации помогут Вам заинтересовать свою аудиторию. Для просмотра воспользуйтесь проигрывателем, если материал оказался полезным для Вас - поделитесь им с друзьями с помощью социальных кнопок и добавьте наш сайт презентаций ThePresentation.ru в закладки!

Слайды и текст этой презентации

Слайд 1
Текст слайда:

Троицкий Д.И. Интернет-технологии

BOM- И DOM-ОБЪЕКТНЫЕ МОДЕЛИ БРАУЗЕРА

Лекция 12

Кафедра «Автоматизированные станочные системы»
Dept. of Automated Manufacturing Systems


Слайд 2
Текст слайда:

Троицкий Д.И. Интернет-технологии

За окно браузера отвечает так называемая BOM-модель (Browser Object Model), а за Web-страницу – DOM-модель (Document Object Model).

Для обращения из программы на JavaScript и других языках к отдельным элементам как Web-страницы, так и окна браузера используются два набора встроенных объектов со свойствами, методами и событиями.

Коллекция – динамический массив, хранящий ту или информацию или ссылки на объекты. Например, все теги документа хранятся в коллекции тегов, все изображения – в коллекции images и т.д.


Слайд 3
Текст слайда:

Троицкий Д.И. Интернет-технологии

Иерархическая структура объектной модели ВОМ


BOM - объектная модель браузера


Слайд 4
Текст слайда:

Троицкий Д.И. Интернет-технологии

Объект document. Обладает коллекциями и свойствами, представляющими все содержимое HTML-документа. Кроме того, предоставляет методы и события для работы с документами.

Объект history. Содержит информацию об URL-адресах страницы, посещенных клиентом, хранящуюся в журнале браузера. Позволяет сценарию перемещаться по журналу.

Объект event. Глобальный объект, позволяющий программе обращаться к параметрам события.

Объект location. Содержит информацию о текущем URL. Предоставляет методы, позволяющие перезагрузить страницу.

Объект MimeType. Предоставляет информацию о типе данных MIME текущей страницы.

Основные объекты браузера

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


Слайд 5
Текст слайда:

Троицкий Д.И. Интернет-технологии

Объект screen. Предоставляет сценарию информацию о разрешающей способности и графических возможностях монитора клиента.

Объект Selection. Возвращает активный выделенный участок на экране. Предоставляет доступ к выделенным элементам, в том числе к тексту страницы.

Объект Style. Предоставляет доступ к отдельным стилевым свойствам элемента, которые заранее заданы таблицей стилей или строковым стилевым тегом на странице.

Объект Stylesheet. Этот объект представляет все стили одной таблицы стилей из коллекции stylesheets.

Объект TextRange. Этот объект представляет текстовый поток HTML-документа. Он может быть использован для чтения и записи текста в пределах страницы.

Объект window. Этот объект ссылается на текущее окно, которое может быть как окном верхнего уровня, так и кадром, созданным с помощью тега в другом документе.


Слайд 6
Текст слайда:

Троицкий Д.И. Интернет-технологии

Коллекции браузера


Слайд 7
Текст слайда:

Троицкий Д.И. Интернет-технологии

Коллекции браузера (продолжение)


Слайд 8
Текст слайда:

Троицкий Д.И. Интернет-технологии

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

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

В отличие от объектной модели браузера (BOM), которая уникальна для каждого браузера, объектная модель документа является стандартна и должна поддерживаться всеми браузерами.

В DOM документ представляется в виде древовидной структуры. Это обеспечивает унифицированный способ навигации по документу.


Слайд 9
Текст слайда:

Троицкий Д.И. Интернет-технологии

Представление HTML-документа в виде древовидной структуры


Слайд 10
Текст слайда:

Троицкий Д.И. Интернет-технологии

Иерархия объектов DOM-модели


Язык JavaScript имеет доступ ко всем этим объектам (фактически, они являются встроенными объектами Java).


Слайд 11
Текст слайда:

Троицкий Д.И. Интернет-технологии

В модели DOM к элементу документа можно обратиться непосредственно по его идентификатору id, воспользовавшись методом getElementById объекта Document.

Например:


Основы DOM


Основы DOM


A Text






Слайд 12
Текст слайда:

Троицкий Д.И. Интернет-технологии

Для получения коллекции всех элементов, соответствующих какому-либо тегу, используется метод объекта Document getElementsByTagName.

Например, команда
var a = document.getElementsByTagName("TD")
присвоит переменной a коллекцию всех элементов . Имя элемента (тега) следует писать прописными буквами ("TD").

Чтобы воспользоваться преимуществом древовидной структуры, принятой в DOM для представления документа, следует использовать навигационные атрибуты.


Слайд 13
Текст слайда:

Троицкий Д.И. Интернет-технологии

Навигационные атрибуты объекта Node


Слайд 14
Текст слайда:

Троицкий Д.И. Интернет-технологии

Навигационные атрибуты объекта Node


Слайд 15
Текст слайда:

Троицкий Д.И. Интернет-технологии

Часто требуется динамически формировать Web-страницы, например, в случае создания чатов, форумов, либо динамически создаваемых Web-страниц, содержимое которых хранится в базе данных. Использование DOM позволяет решить такую задачу.

Для создания объектов у объекта Document имеются следующие методы

Динамическая генерация Web-страниц средствами DHTML на основе DOM


Слайд 16
Текст слайда:

Троицкий Д.И. Интернет-технологии

Вновь созданные объекты добавляются в структуру документа при помощи методов объекта Node.


Слайд 17
Текст слайда:

Троицкий Д.И. Интернет-технологии



Пример динамической генерации документа





Пример динамической генерации документа средствами DOM:


Слайд 18
Текст слайда:

Троицкий Д.И. Интернет-технологии

Для чтения и установки атрибутов используются следующие методы объекта Element.


Слайд 19
Текст слайда:

Троицкий Д.И. Интернет-технологии

Как правило, программы для Web-страниц управляются событиями. Чтобы узнать, какое событие произошло, в DOM имеется объект события event. Объект event является локальным и его следует явным образом передавать в обработчик события

События, связанные с мышью, генерирует объект mouse.


Обратная связь

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

Email: Нажмите что бы посмотреть 

Что такое ThePresentation.ru?

Это сайт презентаций, докладов, проектов, шаблонов в формате PowerPoint. Мы помогаем школьникам, студентам, учителям, преподавателям хранить и обмениваться учебными материалами с другими пользователями.


Для правообладателей

Яндекс.Метрика