Любой элемент страницы можно представить в виде объекта с набором свойств и методов. Многие свойства связаны с соответствующими тегами атрибута HTML –тега, образующего элемент, другие же вообще ни имеют ничего общего с HTML. Необходимо знать, что большим количеством методов и свойств документ обладает только в IE. Объектная модель NN несравнимо беднее и позволяет программировать только слои, гиперссылки и некоторые другие объекты.
Приведём простейшие примеры работы с элементами Web-страницы.
Предположим, что мы имеем на нашей Web-странице рисунок.
<IMG ID=”someimage” src=”prim_js/someimage.gif” height=”30” width=”50”>
Из кода скрипта мы можем изменить как сам рисунок, так и его геометрические размеры.
someimage.src=”someimage2.gif”
someimage.height=”40”
В этом примеры ссылка на родительский объект document отсутствует, это не вызовет ни какой ошибки. Мы используем свойства объекта image (рисунка), имена которых совпадают с названиями соответствующих атрибутов тега <img>. Это сделано для упрощения программирования скриптов.
Например, имея гиперссылку, можно изменить адрес на который она указывает.
<A ID=”SLink” href =”page1.html”> Ссылка куда-то </a>
sLink.href=”page2.html”
В этом примере, гиперссылке, которая указывала на документ с именем page1, было присвоено новое значение тега href, после чего гиперссылка стала указывать на документ, с именем page2.html.
Можно убрать рамку у таблицы.
<table id = “sometable” border=”2”>
sometable.border = “0”
В первой строке мы установили свойство ширина рамки тега table (таблица) в значение 2. Во второй строке, обращаясь к таблице как к объекту, мы изменили значение ширины рамки.
Таким образом, каждый элемент страницы представляет собой объект, имеющий множество методов и свойств. Нет смысла приводить их все, достаточно обратиться к любой литературе, посвящённой HTML, и посмотреть, что делает тот или иной атрибут того или иного тега.
Кроме свойств, элементы страницы поддерживают некоторое количество методов. Как правило, это стандартные методы, поддерживаемые всеми элементами страницы независимо от тега (см. ниже). Свои собственные методы имеют только сложные элементы, такие как таблицы.
Например, метод InsertRow позволит вставить в таблицу строку с заданным номером.
sometable.insertRow(4)
Это выражение вставит в таблицу с именем (идентификатором) sometable, строку под номером 5. (Индексация начинается с 0).
В свою очередь строка таблицы тоже является сложным объектом и также поддерживает внутреннюю коллекцию cells (ячейки).
sometable.row(5).cells(2).bgcolor = “red” ;
В этой строке идет обращение к свойству bgcolor (цвет заливки ) объекта ячейка с номером 2, родительского объекта 5-ая строка. Но объект 5 – ая строка имеет родительский объект – таблицу с именем sometable. Не забываем, что в свою очередь таблица sometable является свойством объекта document, ссылку на который мы опустили. А уже объект document – это свойство объекта window. С учётом всего сказанного можно было бы записать выше указанную строку так:
Window.documetn.sometable.row(5).cells(2).bgcolor= “red”;
Как видно, объектная модель документа достаточно сложна, но и вместе с тем, очень логично организована. Нет практически ничего, недоступного для выполнения в скрипте с тем или иным элементом Web-страницы. Но повторим ещё раз, что такой мощной объектной моделью обладает только обозреватель IE.
Приведём общие свойства и методы, поддерживаемые всеми элементами Web-страницы.