Иллюстрированный самоучитель по Web-графике

Объектная модель

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

Иллюстрированный самоучитель по Web-графике › Элементы языков HTML и JAVASCRIPT › Объектная модель
Рис. 680. Объектная модель

Самым главным является объект window (окно), который находится вверху иерархии. Но в то же время основное в модели – объект document, т. к. большая часть страницы состоит из его частей. По существу, объект window – просто контейнер (объект, содержащий другой объект) для объекта document. Кроме объектов, в модель входят коллекции – структуры, аналогичные массивам. В таком массиве каждый элемент принадлежит структуре и связан с соседними элементами. Иначе говоря, коллекция – это способ держать объекты вместе для упрощения доступа к ним с помощью программного кода. Считайте, что коллекция – просто промежуточный (технологический) уровень в иерархии.

Например, объект document может содержать коллекцию images картинок (объектов frame). Мы можем обратиться к картинке либо по ее имени, либо по порядковому номеру:

document.images("my_labelture")
  
window.images(0)

В коллекциях объектной модели первый элемент имеет нулевой индекс (порядковый номер). Расположение (индекс) элемента в коллекции зависит от его места в исходном тексте HTML-документа.

Рассмотрим пример простого HTML-документа:

<HTML>
  
<HEAD>
    <TITLE>Пример</TITLE>
</HEAD>
  
<BODY>
    <CENTER>
        <!-- Рисунок 1 -->
        <IMG SRC="рис1.gif" NAME="imagel">
    </CENTER>
    <!-- Форма, содержащая три элемента -->
    <FORM NAME="myForm">Имя:
        <INPUT TYPE="TEXT" NAME="xName" VALUE="" XBR>E-mail:
        <INPUT TYPE="TEXT" NAME="email" VALUE=" ">
        <BR>
        <BR>
        <INPUT TYPE="BUTTON" NAME="raybutton" VALUE="Нажми меня">
    </FORM>
    <!-- Рисунок 2 -->
    <IMG SRC="pnc2.gif" NAME="image2" WIDTH=200>
    <!-- Ссылка -->
    <A HREF="www.admiral.ru/~dunaev">Mofl домашняя страница</A>
</BODY>
  
</HTML>

На рисунке, изображающем описанную выше страницу в окне браузера, сделаны поясняющие надписи, чтобы было понятно, какие элементы страницы какими объектами представляются.

Если Вы заметили ошибку, выделите, пожалуйста, необходимый текст и нажмите CTRL + Enter, чтобы сообщить об этом редактору.