Шаг 6 - Объектная модель

Структура документа HTML, и вобщем-то сам язык, обязывает браузер иметь некую объектную модель, с помощью которой доступ ко всем объектам был бы прост.

В JavaScript за область html документа отвечает объект document. Он также является самым главным среди всей иерархии объектов браузера, к которым Вы способны обратится посредством скрипта. Этот объект позволяет получить доступ ко всем элементам страницы, таким как формы, изображения, ссылки и т.д.

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

<html>
<body>

<img src=0.gif alt="images[0]"><br>
<img src=1.gif alt="images[1]"><br>
<img src=2.gif alt="images[2]"><br>
<form>
<input type=text>
</form>
<img src=3.gif alt="images[3]"><br>
<form>
<input type=text>
</form>

</body>
</html>

Из всего документа браузер создает несколько массивов объектов. Вот какие эти массивы:

Каждый такой массив содержит в себе все соотвествующие элементы документа. Нумерация в массивах начинается с 0. Чтобы получить, например, доступ к самому первому изображению в документе нужно составить такое имя:

document.images[0]

В примере выше, чтобы показать какое изображение какой имеет номер я приписывал атрибут alt.

Для того, чтобы облегчить доступ к объектам в html существует атрибут тега name. Если Вы напишете так:

<img src=1.gif name=ris1 alt="images[1]">

То после такого определения тега изображения Вы сможете обращаться к изображению 1.gif двумя способами:

document.images[1]
document.ris1

Как видите для простоты и мобильности правильнее будет использовать атрибут name для всех тегов, к которым впоследствии Вы планируете обращаться внутри сценариев JavaScript. Пока мы не рассматривали своства каждого из массивов и сделаем это в следующих шагах.


Предыдущий Шаг | Следующий Шаг | Оглавление
Автор Кузин Андрей.