Объектная модель документа ( DOM )
А теперь настало время поговорить о классах и объектах Web -обозревателя подробнее.
Давайте посмотрим на какуюнибудь Web -страницу. Что она собой представляет? Фактически, иерархию элементов. Мельчайшие элементы страницы, например текстовые абзацы, являются потомками более крупных и сложных элементов, например, свободно позиционируемых элементов. Свободные элементы, в свою очередь, могут находиться в других свободных элементах или непосредственно в самой странице. Получается весьма сложная многоуровневая структура, в которой одни элементы зависят от других.
Описать такую структуру можно с помощью объектов. Точнее, сложной иерархии объектов, вложенных друг в друга и зависящих друг от друга. Такая структура называется объектной моделью документа ( Document Object Model , DOM ). Все современные программы Web -обозревателей представляют Web -страницу как иерархический набор объектов.
Какое преимущество дает пользователям такой подход? Никакого. Все это рассчитано только на программистов, разрабатывающих Web -сценарии.
Каждый из объектов, из которых состоит Web -страница, имеет набор свойств, предоставляющих доступ к значениям различных атрибутов соответствующего тега, методов, с помощью которых этим объектом можно манипулировать, и событий, которые могут в этом объекте происходить и которые можно обрабатывать. Это позволяет управлять практически любым элементом страницы, самой страницей и даже самим Web -обозревателем, используя специально написанные Web -сценарии.
Например, именно таким образом на Web -странице создаются анимированные элементы
(см. главу 12). Также с помощью сценариев можно изменять цвета, параметры шрифта и даже само содержимое элементов страницы. Более того, так можно управлять и самим Web -обозревателем: открывать и закрывать вспомогательные окна, перемещаться взад-вперед по списку "истории" и даже принудительно загружать нужные Web -страницы без участия пользователя.
Неужели вы думали, что Web -программисты пройдут мимо такой возможности! Если вы думаете, что пройдут, — вы плохо их знаете. Вспомните, например, что говорилось в предыдущей главе об анимации. Едва появилась возможность немного подвигать по странице тем или иным рисунком, как Web -программисты эту возможность реализовали. А сейчас анимацию поддерживают даже Web -редакторы, и Dreamweaver тому пример.
Но хватит говорить на отвлеченные темы! Давайте всетаки займемся объектной моделью документа.
Сначала выясним, каким образом можно получить доступ к нужному элементу. Для этого ему необходимо дать уникальное имя. Делается это с помощью атрибута id или name . Атрибут id поддерживается практически всеми тегами HTML , атрибут name — только некоторыми. К тегам, поддерживающим этот атрибут, относятся формы, элементы управления, фреймы, гиперссылки и некоторые другие.
Но почему же нельзя пользоваться только атрибутом id ? Все дело в проклятой несовместимости Navigator 4. x и интернет-стандартов. Старые версии Navigator используют атрибут id только для присвоения элементам стилей, а для задания имен признают только атрибут name . Видите, какая морока!..
Дав с помощью атрибутов id или name элементу страницы уникальное имя, вы можете обращаться к нему из сценария, вызывая его методы и свойства, Интерпретатор сам найдет нужный элемент по его имени. Для доступа к элементу страницы в Internet Explorer используется синтаксис:
< Имя элемента , заданное в атрибутах ID или NAME >.< Свойство или метод >
Если же вы пишете сценарий для Navigator 4. x , делайте так:
document ["<Имя элемента, заданное в атрибуте NAME >"].<Свойство или метод)
Давайте приведем небольшой пример, поясняющий вышесказанное.
< Р ID="para" STYLE="color: #0000FF"> Некий текст .</ Р >
Сначала мы создали текстовый абзац, назвали его para (обратите внимание на значение атрибута id ) и присвоили ему встроенный стиль, задающий цвет текста. Сейчас мы этот цвет текста изменим, воспользовавшись Web -сценарием.
para.style.color = "#FF0000";
Здесь нужны дополнительные пояснения. Дело в том, что каждый элемент страницы в объектной модели документа имеет внутренний объект style , дающий доступ к его встроенному стилю. Обратиться к этому объекту можно через одноименное свойство, что мы и сделали. А уж объект style предоставляет доступ ко всем атрибутам встроенного стиля через одноименные свойства. В данном примере для получения доступа к значению атрибута стиля color использовалось свойство color .
Вы можете изменить выравнивание текста этого абзаца, обратившись к
СВОЙСТВУ align:
para,align = "center";
Свойство align предоставляет доступ к значению атрибута align тега <р>.
К несчастью, вышеприведенный пример будет работать только в самых последних программах Web -обозревателей. Пресловутый Navigator 4..x не позволяет изменять внешний вид и содержимое элементов страницы после ее загрузки. Исключение составляют только графические изображения, фреймы и слои.
А вот этот код будет работать везде:
<IMG NAME=" some Image" SRC=" imagel.gif ">
. . .
document ["somelmage"] .src = "image2.gif";
Он меняет файл, содержимое которого отображается в элементе графического изображения, на другой. Для этого он присваивает иное значение свойству src объекта somelmage , предоставляющее доступ к атрибуту src тега
Чтобы получить доступ к самой Web -странице, воспользуйтесь системным объектом document . В частности, вы можете задать цвет гиперссылок, воспользовавшись свойством linkcoior , предоставляющим доступ к значению атрибута link тега < body >:
document .linkColor = "#FF0000 ";
Оба рассмотренных нами объекта представляют собой соответственно видимый элемент страницы и саму страницу. Оба этих объекта были созданы с помощью тегов HTML . Теперь же мы начнем рассмотрение объектов, не являющихся элементами страницы. Это объекты Web -обозревателя, не видимые пользователю.
Объект document имеет внутренний объект location , предоставляющий доступ к интернет-адресу страницы и различным его частям. Доступен он через одноименное свойство. Воспользовавшись этим объектом, мы можем узнать, с какого интернет-адреса была загружена данная страница:
address = document .location.href ;
выяснить имя файла этой страницы:
filename = document .location .pathname ;
либо загрузить другую страницу:
document.location.href = "http://www.othersite.ru/otherpage.htm";
Объект window представляет текущее окно Web -обозревателя либо текущий фрейм, если страница загружена во фрейме. С помощью этого объекта вы можете, например, закрыть это окно:
window .close ();
или заменить текст, отображаемый в его строке статуса:
window .status = "Сейчас работает Web -сценарий!";
Объект window имеет внутренний объект navigator , предоставляющий доступ к самой программе Web -обозревателя. Доступен он через одноименное свойство. Воспользовавшись этим объектом, мы можем выяснить, например, версию программы:
version = window.navigator.appVersion;
или название :
programName = window.navigator.appName;
Объект window имеет внутренний объект history, предоставляющий доступ к списку " истории " Web- обозревателя . Он доступен также через одноименное свойство. Воспользовавшись этим объектом, мы можем "путешествовать" по списку "истории" вперед:
window.history.forward ();
и назад :
window . history . back ();
В объектной модели документа существует также еще несколько других объектов, но рассматриваться они не будут. Эти объекты применяются достаточно редко и в весьма специфических случаях. Если же вы всетаки захоч тите узнать побольше об объектной модели документа, обратитесь к соответствующей литературе
