Большой архив статей, книг, документации по программированию, вебдизайну, компьютерной графике, сетям, операционным системам и многому другому
 
<Добавить в Избранное>    <Сделать стартовой>    <Реклама на сайте>    <Контакты>
  Главная Документация Программы Обои   Экспорт RSS E-Books
 
 

   Интернет технологии -> HTML/DHTML -> Объектная модель Microsoft Internet Explorer 4.0

Объектная модель Microsoft Internet Explorer 4.0 существенно расширена по сравнению с предыдущей версией и обеспечивает совершенно новый уровень автоматизации и программного управления содержимым HTML-страниц. Эта объектная модель является основой для функционирования технологии Dynamic HTML. Используя программы на скриптовых языках, вы можете управлять всеми элементами, расположенными на HTML-страницах, - тэгами, атрибутами, графическими изображениями, объектами и текстом - создавать, перемещать их и изменять их свойства в любой момент времени.

Сегодня в российском пространстве Internet все еще очень мало <живых> страниц. Отчасти это связано с малой пропускной способностью линий связи, отчасти - с неумением или нежеланием Web-мастеров программировать на языках сценариев. Dynamic HTML со своей объектной моделью описывает понятную и логичную концепцию программирования, позволяющую создавать на Web-страницах красивые, а порой неожиданные эффекты без заметного увеличения трафика.

В данной статье рассматриваются объекты, свойства, методы, коллекции и события, составляющие объектную модель Internet Explorer 4.0.

Классы и коллекции

Язык HTML задает структуру документа, которая может быть достаточно легко представлена в виде иерархии классов. Содержимое этой иерархии обычно представляется древовидной структурой, обход которой является обходом коллекций некоторых элементов. Коллекции похожи на массивы, и их элементы имеют индекс, соответствующий порядку описания элемента в HTML-документе. Рассмотрим следующий пример:

<HTML>
<HEAD>
<TITLE>Пример документа </TITLE>
</HEAD>
<BODY>
<H1>Заголовок уровня 1</H1>
<P>Параграф с <B>выделенным текстом</B>
</BODY>
</HTML>

Данный документ может быть представлен следующей древовидной структурой:

HTML
|
+---HEAD
| |
| +---TITLE
|
+---BODY
|
+---H1
|
+---P
|
+---B

В объектной модели глобальная коллекция all представляет собой всю древовидную структуру. Для приведенного примера в этой глобальной коллекции содержатся следующие объекты:

HTML, HEAD, TITLE, BODY, H1, P, B

Это <плоское> представление древовидной структуры, но из этой глобальной коллекции доступны как отдельные коллекции, представляющие части документа, так и их элементы.

Коллекции

Как мы отметили выше, коллекции похожи на массивы, и их элементы имеют индекс, соответствующий порядку описания элемента в HTML-документе. Все коллекции имеют следующие общие свойства:

  • они представляют те или иные элементы HTML-документа;
  • они поддерживают методы для создания подмножества на основе тэгов, классов или имен/идентификаторов;
  • они позволяют обращаться к отдельным элементам по индексу или по идентификатору.

Следует заметить, что все коллекции отражают текущее состояние документа. Например, если какая-то переменная, созданная во время загрузки документа, содержала коллекцию элементов 'table' в нем, а затем в документе появилось еще несколько таблиц, то в коллекции будет отражено реальное число таблиц, расположенных в документе в данный момент.

Для работы с коллекциями существуют следующие свойства и методы:

- свойство length, которое позволяет узнать число элементов в коллекции;
- метод item, который возвращает все элементы, соответствующие указанному индексу или идентификатору;
- метод tags, который возвращает коллекцию, содержащую только указанные тэги языка HTML.

Если указан неверный индекс, то возвращается нулевой объект, указание неверного тэга приводит к возврату пустой коллекции. Этим можно воспользоваться, например, при поиске того или иного элемента:

if (0==document.all.tags("h2").length {
' в документе нет тэгов <h2>
}

Первый элемент любой коллекции имеет индекс 0, последний элемент - индекс, равный collection.length-1. Ниже показаны примеры доступа к элементу глобальной коллекции:

JScript
var itemThree = document.all[3]
VBScript
dim itemThree
itemThree = document.all(3)

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

Общая иерархия объектов представлена на следующем рисунке.

window
|
+---location
|
+---frames
|
+---history
|
+---navigator
|
+---event
|
+---visual
|
+---document
|
+---links
|
+---anchors
|
+---images
|
+---forms
|
+---applets
|
+---embeds
|
+---plugins
|
+---frames
|
+---scripts
|
+---all
|
+---selection
|
+---body

Рассмотрим ряд объектов представленной иерархии более подробно.

Объект window
Этот объект представляет собой текущее окно браузера. Объект имеет свойства name, length, parent, self, top, status, defaultStatus, opener, closed, обладает коллекцией frames, методами item, navigate, blur, focus, alert, confirm, prompt, setTimeout, clearTimeout, close, open, scroll, showModalDialog, и может обрабатывать события onfocus, onload, onunload, onblur и onhelp.
Свойство location
Задает полный адрес (URL) HTML-документа. Доступно для чтения и для записи.
Коллекция frames
Содержит все фреймы, расположенные в данном HTML-документе, описанные тэгами IFRAME.
Объект history
Содержит информацию обо всех адресах (в формате URL), ранее посещавшихся клиентом. Имеет свойство length и методы back, forward и go
Объект navigator
Данный объект представляет собой информацию о браузере и имеет следующие свойства: appName, appVersion, appCodeName, userAgent, cookieEnabled и javaEnabled.
Свойство event
Позволяет определить событие, для которого написан данный сценарий. Значение доступно только для чтения.
Объект visual
Данный объект содержит информацию о клиентском экране и имеет свойства bufferDepth, colorDepth, hres и vres
Объект document
Объект document содержит информацию о всем HTML-документе и имеет ряд коллекций, методов, событий и свойств.

Свойства: alinkColor, linkColor, vlinkColor, mimeType, title, bgColor, link, vLink, aLink, cookie, lastModified, charset, location, referrer, fgColor, activeElement, strReadyState, domain, URL, fileSize, fileCreatedDate, fileModifiedDate и fileUpdatedDate,

Коллекции: anchors, forms, links, all, scripts, images, applets, frames, embeds, plugins

Методы: close, open, clear, write, writeln, rangeFromText, rangeFromElement, execCommand, queryCommandEnabled, queryCommandText, elementFromPoint, queryCommandSupported, queryCommandState, queryCommandIndeterm, createElement

События: onclick, onmouseover, ondblclick, onkeypress, onmousedown, onmousemove, onmouseup, onkeydown, onkeyup, onmouseout, onreadystatechange, onhelp, onbeforeupdate, onafterupdate

Предопределенные коллекции

В Internet Explorer 4.0 предопределены следующие коллекции:

Коллекция

Содержание

All

Все элементы документа

Forms

Все элементы FORM

Anchors

Все элементы <A name=...>

Links

Все элементы <A href=...>, <AREA>

Images

Все элементы IMG

Applets

Все элементы APPLET

Embeds, plugins

Все элементы EMBED

Frames

Все элементы IFRAME

Scripts

Все элементы SCRIPT

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

Создание коллекции всех таблиц

var tables = document.all.tags("TABLE")

Доступ к первому элементу H1 в документе

var firstH1 = document.all.tags("H1").item(0) //collections are 0-based.

Создание коллекции всех элементов с именем или идентификатором 'main'

var gender = document.all.item("main")

Некоторые важные объекты

Все элементы HTML-документа и их атрибуты доступны как объекты. Ниже рассматриваются только некоторые из этих объектов. Более подробно мы рассмотрим объекты, представляющие собой элементы HTML-документа, в следующих публикациях.

Объект Body (<BODY>)
Объект Body доступен через коллекцию all и открывает доступ к содержимому всего документа. Для этого используется метод createTextRange. Через этот метод становится доступной вся объектная модель данного HTML-документа.
Объект Head (<HEAD>)
Объект Head, описываемый тэгом <HEAD>, также доступен через коллекцию all.
Объект Comment (<!-- -->)
Комментарии в HTML-документе доступны через объект Comment, который доступен для чтения и для записи. Например:

<HTML>
<!-Это - комментарий -->
</HTML>
alert(document.all[1].text)
// Выводится содержимое комментария.

Объект Script (<SCRIPT>)
Через объект Script доступны скриптовые программы, описанные в документе с помощью тэга <SCRIPT>.
Объект Form (<FORM>)
Объект Form включает в себя классы collection и element. Коллекция элементов elements возвращает один из элементов формы. Объект Form имеет два метода - submit - для посылки содержимого формы и reset  - для обнуления ее содержимого.

Встроенные управляющие элементы

К встроенным управляющим элементам относятся элементы, описываемые тэгами <SELECT>, <BUTTON>, <INPUT>, <TEXTAREA>, <MARQUEE> и <IMG>. Этим элементам соответствуют объекты, которые имеют методы для управления их содержанием.

В следующих номерах журнала мы познакомимся с основами Dynamic HTML. А пока рассмотрим несколько простых примеров использования Dynamic HTML, которые дадут вам представление о данной технологии.

В первом примере мы создадим обработчик щелчка мыши для элемента документа, описываемого тэгом <H1>:

<HTML>
<HEAD>
<TITLE>Пример DHTML в IE40</TITLE>
</HEAD>
<SCRIPT LANGUAGE=VBScript>
sub doClick
alert "Вы щелкнули в заголовке 1"
end sub
</SCRIPT>
<BODY>
<H1 onClick = doClick>Заголовок 1 - щелкните мышью</H1>
</BODY>
</HTML>

Как можно заметить, мы использовали обработчик onClick, который присутствует у всех элементов документа, а не только <активных> элементов - элементов, располагаемых в формах и ссылках, как это было в предыдущих версиях Internet Explorer.

В следующем примере показано как динамически изменить содержимое документа - в документе есть два элемента <H1> - один активный и другой пассивный. Перемещение мыши в область активного элемента приводит к изменению содержимого документа.

<HTML>
<HEAD>
<TITLE>Пример DHTML в IE40 Demo </TITLE>
</HEAD>
<SCRIPT LANGUAGE=VBScript>
sub DoChange
document.write "Текст изменен динамически"
document.close
end sub
</SCRIPT>
<BODY>
<H1 onMouseOver = DoChange>

Поместите мышь сюда - текст документа изменится</H1>

<H1>Поместите мышь сюда - ничего не изменится</H1>

</BODY>

</HTML>

В следующем примере мы используем обработчик omMouseOver элемента, описывамого тэгом <H4>, который в данном случае выступает в качестве ссылки. Данный пример представляет собой экран слайд-шоу и содержит две <ссылки> - вперед и назад.

<HTML>
<HEAD>
<TITLE>Пример DHTML в IE40</TITLE>
</HEAD>
<SCRIPT LANGUAGE=VBScript>
sub DoBack
window.location.href = "slide2.htm"
end sub
sub DoNext
window.location.href = "slide4.htm"
end sub
</SCRIPT>
<BODY>
<H1>Слайд 3</H1>
<P></P><P></P><P></P>
<H4 ALIGN=CENTER onMouseOver = DoBack>Назад</H4>
<H4 ALIGN=CENTER onMouseOver = DoNext>Вперед</H4>
</BODY>
</HTML>

И еще один пример, на этот раз с использованием таблиц стилей. В нем показано, как используя обработчики onMouseOver и onMouseOut, динамически изменять атрибуты элемента, описанного тэгом <H1>:

<HTML>
<HEAD>
<TITLE>Пример DHTML в IE40</TITLE>
</HEAD>
<BODY>
<H1 id=DemoH1 style="font-weight: normal"
onmouseover = "makeItalic();"
onmouseout = "makeNormal();">
Dynamic HTML
<script language=VBScript>
sub makeItalic
DemoH1.style.fontstyle = "Italic"
end sub
sub makeNormal
DemoH1.style.fontstyle = "Normal"
end sub
</script>
</BODY>
</HTML>


Алексей Федоров
 
 
Интересное в сети
 
10 новых программ
CodeLobster PHP Edition 3.7.2
WinToFlash 0.7.0008
Free Video to Flash Converter 4.7.24
Total Commander v7.55
aTunes 2.0.1
Process Explorer v12.04
Backup42 v3.0
Predator 2.0.1
FastStone Image Viewer 4.1
Process Lasso 3.70.4
FastStone Image Viewer 4.0
Xion Audio Player 1.0.125
Notepad GNU v.2.2.8.7.7
K-Lite Codec Pack 5.3.0 Full


Наши сервисы
Рассылка новостей. Подпишитесь на рассылку сейчас и вы всегда будете в курсе последних событий в мире информационных технологий.
Новостные информеры. Поставьте наши информеры к себе и у вас на сайте появится дополнительный постоянно обновляемый раздел.
Добавление статей. Если вы являетесь автором статьи или обзора на тему ИТ присылайте материал нам, мы с удовольствием опубликуем его у себя на сайте.
Реклама на сайте. Размещая рекламу у нас, вы получите новых посетителей, которые могут стать вашими клиентами.
 
Это интересно
 

Copyright © CompDoc.Ru
При цитировании и перепечатке ссылка на www.compdoc.ru обязательна. Карта сайта.