Этот сайт - часть системы сайтов для начинающих веб-мастеров
|
Объектная
модель документа (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="image1.gif ">
document ["someImage"]
.src = "image2.gif";
Он меняет
файл, содержимое которого отображается в элементе графического изображения,
на другой. Для этого он присваивает иное значение свойству src объекта somelmage,
предоставляющее доступ к атрибуту SRC тега
<IMG>.
Чтобы получить
доступ к самой Web-странице, воспользуйтесь системным объектом document. В частности,
вы можете задать цвет гиперссылок, воспользовавшись свойством linkColor, предоставляющим
доступ к значению атрибута 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();
В объектной
модели документа существует также еще несколько других объектов, но рассматриваться
они не будут. Эти объекты применяются достаточно редко и в весьма специфических
случаях. Если же вы все-таки захотите узнать побольше об объектной модели документа,
обратитесь к соответствующей литературе.