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

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

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

На этой странице расположены два рисунка, одна ссылка и форма, содержащая два поля ввода текста и кнопку. Окно браузера – это объект window. Он также содержит элементы, такие как строка состояния. Внутри окна браузера размещен HTML-документ. Этот документ представлен объектом document – самый важный объект в объектной модели. Все элементы HTML-документа являются свойствами объекта document и одновременно объектами с точки зрения языка сценариев. Для удобства некоторые объекты объединены в группы, называемые коллекциями. Например, коллекция всех картинок в HTML-документе называется images, а коллекция всех ссылок – links. Чтобы обратиться к объекту из коллекции, нужно указать его номер в этой коллекции. На следующем рисунке приведена иерархическая схема объектного представления HTML-документа из рассматриваемого примера:

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

Первый объект в этой структуре – document. Первый элемент HTML-документа – картинка с именем image 1. Она представляется в виде объекта images (0) (напомним, что нумерация элементов коллекции начинается с нуля, поэтому первый элемент коллекции имеет индекс 0). В примере первой картинкой является графическое изображение из файла рис 1.gif. Чтобы получить доступ к этому элементу страницы, требуется записать:

document.images(0)

Если нужна кнопка, то пишем:

document.forms(0).elements(2)

Для доступа к первому полю ввода используется запись:

document.forms(0).elements(0)

Если мы хотим узнать, какой текст ввел пользователь в это поле, то должны выяснить, какое свойство или метод позволяет получить доступ к этой информации. Обращаемся к справочнику и находим, что свойство value имеет в качестве значения текст, содержащийся в поле ввода, – как раз то, что нам нужно. Тогда для получения информации следует записать:

document.forms(0).elements(0).value

В HTML-документе были предусмотрительно определены имена элементов с помощью атрибута NAME. Хотя задание имен не является обязательным, указывать имена все же очень полезно, поскольку появляется возможность обращаться к элементам по именам. Например, вместо записи:

document.forms(0).elements(0).value

…можно было бы записать:

document.myForm.xName.value

Это удобно, особенно когда на странице расположено много элементов, и трудно отслеживать, какой индекс имеет тот или иной элемент. Еще раз обратите внимание на то, что регистр букв в имени элемента имеет важное значение. Так, myForm и myform – не одно и то же.

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

Теперь рассмотрим основные объекты, их свойства и методы.

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