SNK Software
Web Studio Монополия Metaproducts Утилиты Игры
Монополию Web Studio Библиотека
Вебмастер Дельфи Работа на ПК Самоучитель
Для PHP Для Delphi
Веб-дизайн Программирование Компьютеры Девайсы Заметки
SNK Software Индустрия hardware Индустрия software
О студии Портфолио Сопровождение сайтов

Новые материалы

Девайсы:
Сравнительный обзор Nokia Lumia 920 и HTC 8X
Девайсы:
Обзор Nokia Lumia 820 – смартфона на WP8
Вебмастеру:
Настройка Apache, PHP и MySQL для Linux-VPS
Вебмастеру:
VPS на домашнем ПК: настройка сети в VM VirtualBox и Debian
Вебмастеру:
VPS на домашнем ПК: устанавливаем Linux Debian 6
Вебмастеру:
VPS на домашнем ПК: установка VM VirtualBox
Работа на компьютере:
Иные возможности текстового процессора Word
Работа на компьютере:
Вставка объектов
Работа на компьютере:
Таблицы в Word
Работа на компьютере:
Печать и сохранение документов
Работа на компьютере:
Сноски, колонтитулы, оглавление и указатели в Word

Основы объектной модели документа

В этой главе:

  1. История DOM и совместимость
  2. Иерархия объектов в браузерах
  3. Доступ к объектам документа из JavaScript

Объектная модель документа (DOM) обеспечивает программный интерфейс (API) для HTML и XML-документов. Она определяет логическую структуру документов и способы взаимодействия с ними.

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

По своей сути объектная модель документа – это не более чем отображение web-страницы во внутреннем представлении браузера, и сама по себе она ничего не значит. Но при помощи сценариев на JavaScript можно взаимодействовать с объектной моделью, изменяя тем самым внешнее представление и даже содержание документа. При помощи DOM сценарии получают доступ ко всем объектам документа, могут отслеживать события и оперативно изменять содержимое.

История DOM и совместимость

Впервые модель объектов HTML появилась в браузере Netscape 2.0. Изначально она позволяла манипулировать лишь минимальным количеством параметров документа с помощью JavaScript. При разработке MSIE 3.0 компания Microsoft взяла за основу именно эту модель. В разрабатываемом параллельно с ним Netscape 3 были добавлены новые объекты applets и images. Впоследствии данную модель приняли за основу построения дальнейших стандартов, и, как нам уже известно, условно окрестив ее DOM уровня 0. Однако говорить об истинно динамическом HTML было рано вплоть до выхода 4-й версии Internet Explorer. Именно в нем впервые была реализована объектная модель, позволявшая получить доступ к любому элементу документа. С некоторыми оговорками на перманентное нежелание Microsoft следовать каким-либо иным стандартам, кроме своих собственных, заложенную в MSIE 4 объектную модель можно сопоставить с DOM уровня 1.

В то же время, 4-я версия Netscape продолжала плавный эволюционный подход к расширению объектной модели, ограничившись введением слоев (layers) и дальнейшим наращиванием возможностей языка JavaScript. Неэффективность столь мягкого подхода выразилась в том, что в «рейтинге популярности» браузеры поменялись местами. Можно, конечно, долго спорить относительно монополизма Microsoft на рынке операционных систем, но, с точки зрения рядового разработчика, появившаяся всего на несколько месяцев позже конкурента, 4-я версия Internet Explorer предлагала больше новых возможностей, нежели Netscape. Со временем ситуация вновь изменилась на противоположную: новые версии браузеров, основанные на ядре Gecko, предоставляют более широкие возможности для взаимодействия с документом, нежели чем медленно эволюционирующий MSIE: Mozilla Suite 1.0, вышедший примерно в одно время с MSIE 6, в целом, поддерживал DOM уровня 2, в то время, как Microsoft лишь продолжала «допиливать» компромиссные основы, заложенные в MSIE 4.

Впрочем, помимо объектных моделей документа, предложенных Netscape и Microsoft, имеется также вариант W3C. Причем, как уже было отмечено ранее, существуют несколько их вариантов:

Учитывая все вышеизложенное, довольно трудно представить себе, как же удается создавать динамические документы, работающие во всех браузерах, включая различные «ответвления» от основного пути развития DOM, реализованные в MSIE 4.0/5.0. К счастью, в MSIE 6, реализация объектной модели расширена для совместимости с «официальным» DOM уровня 1, а браузеры Mozilla, Opera и Chrome изначально разрабатывались на основе стандартов W3C. Таким образом, констатируем тот факт, что для обеспечения максимальной совместимости следует использовать DOM уровня 1, обращаясь к более современным версиям лишь для выполнения задач, которые могут помочь улучшить функционирование сценариев во второстепенных, или специфических для конкретного браузера, случаях.

Иерархия объектов в браузерах

Прежде, чем приступать к созданию совместимых со всем на свете динамических страниц, необходимо изучить объектную модель браузеров, для чего не помешает заглянуть немного в прошлое. Так, иерархия объектов для четвертых версий MSIE и Netscape, при всех их различиях, имела достаточно много сходных черт. В частности, ряд свойств основного объекта – window, а так же наиболее востребованного при написании сценариев объекта – document, у них во многом совпадают (рис. 4.10).

ПРИМЕЧАНИЕ
Отметим, что document, а так же другие объекты в DOM на самом деле являются не объектами, а интерфейсами, т.е. тем, что осуществляет взаимодействие между сценариями и собственно объектами в документе.

Иерархия DOM в MSIE 4 и Netscape 4

Рис. 4.10. Иерархия DOM в MSIE 4 (слева) и Netscape 4. Различия выделены серым

Суть отличий состоит в том, что MSIE позволяет получить доступ из JavaScript-программы к любому элементу HTML-документа (через свойство document.all), а Netscape 4 – только к некоторым. Если же ограничиться только совпадающими у обеих программ свойствами (для объекта document), то мы получим как раз пресловутый DOM уровня 0, совместимый с этими и всеми последующими версиями браузеров. Собственно, все совместимые с DOM 0 свойства (links, images, anchors, applets и forms) перешли в DOM 1 HTML и DOM 2 HTML. Кроме всех этих свойств, являющихся массивами ссылок на элементы документа того или иного типа, для элемента document предусмотрены так же свойства cookie, и методы open, close, write, writeln и getElementsByName. С большинством методов мы уже знакомы по предыдущим примерам, а что касается свойств, то рассмотрим все их подробнее в таблице 4.17.

Таблица 4.17. Свойства document
СвойствоПримечаниеОписание
allТолько MSIE, Opera 6Нестандартное свойство для доступа к любому объекту на странице
styleSheetsDOM 2 StylesСсылается на связанные с документом таблицы стилей
scriptsТолько MSIEСписок внедренных в документ сценариев
selectionТолько MSIEСсылается на выделенный фрагмент в документе. В DOM 2 для этого предназначены методы Range
framesТолько MSIEСписок элементов IFRAME
layersТолько Netscape 4Список элементов LAYER
embedsНестандартный, но поддерживается всемиСписок элементов EMBED
appletsDOM 0, DOM 1, 2 HTMLСписок Java-аплетов (элементов APPLET)
linksDOM 0, DOM 1, 2 HTMLСписок ссылок (элементов A с атрибутом HREF)
anchorsDOM 0, DOM 1, 2 HTMLСписок якорей (элементов A с атрибутом NAME)
imagesDOM 0, DOM 1, 2 HTMLСписок изображений (элементов IMG)
formsDOM 0, DOM 1, 2 HTMLСписок форм (элементов FORM)
titleDOM 1, 2 HTMLСсылается на заголовок (содержимое элемента TITLE) документа
referrerDOM 1, 2 HTMLСодержит URL страницы, ссылающейся на данную (т.е. с которой пользователь попал на текущую)
domainDOM 1, 2 HTMLДоменное имя сервера, на котором находится данный документ
URLDOM 1, 2 HTMLАдрес (URL) данного документа
bodyDOM 1, 2 HTMLТип элемента, содержащего данный документ (BODY или FRAMESET)
cookieDOM 1, 2 HTMLСодержит cookie, в виде пар «имя=значение», разделенных точкой с запятой

Данная таблица дает представление о том, какие свойства документа доступны в тех или иных браузерах. Но на практике, если вы просмотрите все свойства объекта document в том или ином браузере (например, можно использовать для этого сценарий из файла Part_4\statements\for_in.html), то убедитесь, что их гораздо больше, особенно в последних версиях, поддерживающих DOM 3. Связано это с тем, что помимо унаследованных от DOM 0 свойств (forms, images), вы увидите все иные свойства и методы, связанные с интерфейсом document, причем относиться они могут к ядру DOM, его HTML-части, а так же к модели событий, XML и т.д.

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

СОВЕТ
Ряд методов в DOM 2 или 3 ориентирован на XML, который в данной книге не рассматривается. Если вы заинтересованы в детальном изучении объектной модели документа, то можете обратиться к спецификациям DOM 1, DOM 2 и DOM 3, которые можно найти на сайте w3c.org. Кроме того, среди примеров, в каталоге Samples\Part_4\, находится пример inspector.html, позволяющий исследовать свойства объектов navigator, window и document любого браузера.

Доступ к объектам документа из JavaScript-программы

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

Как вы уже знаете, в JavaScript используется доступ к объектам через точку. Таким образом, для доступа, например, к параграфу, имеющему ID=”My1”, требуется написать:

document.getElementByID("MyP1");

Возможно, это не совсем удачный пример, т.к. он не иллюстрирует «классического» варианта доступа (доставшегося в наследство от ранних версий Netscape, или DOM 0, поэтому рассмотрим более универсальный пример – получение доступа к элементам массива images в HTML-документе. Во всех встречающихся сейчас версиях браузеров поддерживается такой синтаксис:

document.images[i];

Например, чтобы заменить 5-ю по счету в документе картинку, можно написать:

document.images[4].src="new_file.gif"; // первый элемент массива - 0

Давайте теперь создадим документ, в котором будет изображение, изменяющееся в зависимости от того, где пользователь провел указатель мышки (листинг 4.7).

Листинг 4.7. Смена картинки при помощи document.images

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> <html> <head> <title>DOM 0 и массив document.images[]</title> <script type="text/JavaScript"><!-- //функция для смены картинки function change_image(i) { document.images[4].src=document.images[i].src; } //--></script> </head> <body> <p>Подведите мышку к цифре:<br /> <!--images[0]--> <img src="dom0/d0.gif" alt="0" onmouseover="change_image(0)" /> <!--images[1]--> <img src="dom0/d1.gif" alt="1" onmouseover="change_image(1)" /> <!--images[2]--> <img src="dom0/d2.gif" alt="2" onmouseover="change_image(2)" /> <!--images[3]--> <img src="dom0/d3.gif" alt="3" onmouseover="change_image(3)" /> </p> <hr /> <p>В последний раз мышка была над цифрой:<br /> <!--images[4]--> <img src="dom0/d0.gif" alt="?" /> </body> </html>

Здесь в сценарии, расположенном в заголовке документа (сценарии, которые ничего не выводят в документ, предпочтительно располагать именно в части HEAD), определена функция change_image, принимающая в качестве параметра число. Этим числом является порядковый номер изображения в документе, в данном случае это будет одно из 4-х значений – от 0 до 3. Функция заменяет изображение пятой картинки – document.images[4] – на такое же, как и у той картинки, над которой находится указатель мышки (рис. 4.11).

Динамическое изменение изображений JavaScript

Рис. 4.11. Динамическое изменение изображений

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

//глобальная(!) переменная для хранения предыдущего значения var old_img=0; function change_image(i) { //Отображаем текущее значение document.images[4].src=document.images[i].src; //Отображаем предыдущее значение document.images[5].src=document.images[old_img].src; //Заменяем хранимое предудущее значение на текущее old_img=i; }

Полностью модернизированный пример продемонстрирован в файле dom0.html, а в примере dom1.html приведен один из вариантов использования более прогрессивных методов DOM 1. В частности, в нем создается массив, содержащий все изображения (т.е. все элементы IMG) при помощи метода getElementsByTagName, определенного в ядре DOM для интерфейса document:

images = document.getElementsByTagName("img");

Такой синтаксис является более удобным с точки зрения своей универсальности: если вместо «img» указать любой другой элемент, скажем, P, то мы получим массив со всеми элементами P, имеющимися в данном документе. Дальнейшие манипуляции также могут быть произведены над любым атрибутом элемента, а не только на предусмотренные в DOM 0 для массива images отдельные свойства. Делать это можно при помощи таких методов интерфейса element, как getAttribute и setAttribute.

Помимо выборки элементов по типу, DOM позволяет обращаться к конкретным элементам документа по их идентификатору. Если обратиться к унаследованным от DOM 0 и HTML 2.0/3.2 методам, то для доступа к элементу можно использовать метод getElementsByName, который использует атрибут NAME для идентификации HTML-элемента на странице. При этом, поскольку значения атрибута NAME, в принципе, могут дублироваться, то данный метод не гарантирует выбор конкретного элемента, а возвращает массив.

ВНИМАНИЕ
Тут следует сделать замечание, что в XHTML 1.0 метод getElementsByName работает только с элементами форм, а начиная с XHTML 1.1 такой метод вообще не приемлем ввиду отсутствия атрибута NAME. Поддержка этого метода может быть прекращена в новых версиях браузеров.

Более удобным и часто применяемым на практике методом интерфейса document является метод getElementById, который возвращает ссылку на элемент документа с указанным идентификатором ID, который, как известно, должен быть уникальным в рамках одного документа. При помощи данного метода можно получить доступ к любому именованному (т.е. имеющему атрибут ID) элементу документа:

<p id="Par1" title="Первый!">Абзац P с ID и TITLE</p> ... <script type="text/JavaScript"><!-- var MyP = document.getElementById("Par1"); alert(MyP.getAttribute("title")); //--></script>

Этот и несколько других вариантов использования методов для доступа к элементам документа приведены в файле getxxx.html.

2011-08-03 // Есть вопросы, предложения, замечания? Вы можете обсудить это на форуме !

Избранное

SNK GSCP
SNK GSCP - новая библиотека для PHP 5!
Web Studio
Web Studio и Visual Workshop
Библиотека:
Стандарты на web-технологии
Монополия
Монополия Android
Загрузки:
скачать программы
Продукция:
программы и книги
Техподдержка / Связаться с нами
Copyright © 1999-2013 SNK. Все права защищены.
При использовании материалов с сайта ссылка на источник обязательна.
Рейтинг@Mail.ru