Урок 8. Объектная модель документа
Не спорю, название звучит жутко. Особенно для человека, «компьютерный» стаж которого не превышает нескольких месяцев или даже недель. Тем не менее, сегодня речь пойдёт о том, без чего дальшейшее обсуждение тегов HTML и операторов JavaScript превратилось бы в пустой звук: мы поговорим об объектной модели HTML-документа, то есть нашей с вами веб-странички.
Что же такое объектная модель?
Любому, кто в своей жизни написал хотя бы несколько строк на бейсике, легко представить себе работу простейшей программки, которая… ну, скажем, считает корни квадратного уравнения. Вы вводите с клавиатуры коэффициенты, а программа вычисляет корни и выводит их на экран.
Представьте себе, что такую же задачу надо решить с помощью скрипта, работающего на веб-странице. Сразу же возникает вопрос: ОТКУДА скрипту предстоит считать исходные данные? И КУДА он потом выведёт результат? Командная строка, как вы понимаете, отсутствует.
Немного подумав, мы всё-таки приходим к ответу: программа может считать данные из текстовых полей, а результат будет выведен в такое же поле или какой-нибудь другой элемент формы. Напоминаю:
a1 = txtCoef1.Value;
Такая строчка передаст переменной a1 текст из поля с именем txtCoef1, а дальше мы может использовать это значение в вычислениях, как нам это заблагорассудится.
txtRoot1 = r1;
А эта строчка запишет в текстовое поле с именем txtRoot1 значение корня r1, полученное в результате вычислений.
Текстовые поля txtCoef1 и txtRoot1 — объекты, встроенные нами в веб-страницу. Мы ссылаемся на них, используя их имена, и нам этого пока достаточно. Но рано или поздно наступит момент, когда нам будет необходимо понять, как устроен ВЕСЬ документ HTML, какова иерархия входящих в него объектов, добавленных разработчиком или существующих изначально, по умолчанию.
Зная, как сослаться на объект, мы можем уничтожить его или создать, изменить его свойства или передать эти свойства другому объекту. Зная иерархию объектов, мы можем, таким образом, полностью контролировать контент веб-страницы, которую разрабатываем.
Отправляя письмо, мы пишем на конверте адрес, постепенно сужая круг поиска: страна, город, индекс, улица, дом, квартира, кому предназначено письмо. В этой иерархии объектом верхнего уровня является страна (если вы пишете письмо, находясь на Марсе, придётся указать ещё и планету назначения, которая займёт более высокий уровень), содержащая объект «город», и так далее до адресата.
Веб-страница также содержит в себе иерархическую структуру объектов. из них мы сейчас рассмотрим объект document, который включает в себя весь создаваемый разработчиком код страницы.
Каждый объект характеризуется набором свойств и методов. Со свойствами всё просто, а вот методы… давайте договоримся считать их названиями функций, которые каждый объект может выполнить. Определение очень сомнительное, но пока сойдёт. ;-)
Свойства объекта document
Перечислим важнейшие свойства объекта document, доступные сценариям JavaScript.
| alinkColor: |
Цвет активных ссылок |
| linkColor: |
Цвет ссылок |
| vlinkColor: |
Цвет посещённых ссылок |
| fgColor: |
Цвет текста |
| bgColor: |
Цвет фона |
| anchors: |
Массив локальных меток, размещённых в документе и использующихся для ссылок внутри него |
| forms: |
Массив, содержащий в виде объектов все формы, расположенные в документе HTML |
| images: |
Массив растровых изображений, включённых в документ |
| links: |
Массив, содержащий все ссылки в документе HTML |
| location: |
Объект, содержащий полный адрес URL документа HTML |
| referer: |
Адрес URL документа HTML, из которого был вызван текущий документ |
| title: |
Заголовок документа |
| URL: |
Полный адрес URL документа HTML |
| history: |
Список адресов URL, посещённых пользователем |
Понятно, что любое из свойств, относящееся, скажем, к цветовому оформлению документа, можно изменить в любой момент:
document.bgColor = "#FFFC09";
Очень важно понять принцип использования массивов forms и images. Предположим, в документе присутствует следующий код:
<form name="frmFeedback">
...
<input name="datafield" type="hidden">
...
</form>
...
<img name="bullet1" src="images/c453gt5.gif">
Как нам сослаться на каждый из упомянутых объектов из сценария JavaScript?
Начнём с формы. Во-первых, для ссылки на неё можно использовать имя, работая с формой как с объектом document.forms.frmFeedback. Но не стоит забывать, что forms — массив: синтаксис document.forms[0] будет означать то же самое. Указанный в скобках индекс соответствует номеру формы в потоке вывода документа.
Для обращения к элементам формы используется её свойство elements. Соответственно, для поля datafield возможны следующие формы записи:
document.forms.frmFeedback.datafield
document.forms.frmFeedback.elements[i]
document.forms[0].datafield
document.forms[0]elements[i]
где i — номер элемента внутри формы.
Точно так же на картинку с именем bullet1 можно сослаться двумя способами:
document.images.bullet1
или
document.images[i]
Как видите, всё достаточно просто.
Разработчику часто приходится пользоваться объектом document.location, а точнее — одним из его свойств, document.location.href. Например, запись
document.location.href="http://www.microsoft.com/";
переадресует пользователя на сервер Microsoft.
Очень интересен массив links, элементы которого также имеют множество полезных свойств:
| hash: |
Имя ссылки, если оно определено |
| host: |
Имя узла и порт, указанные в адресе |
| hostname: |
Имя узла и доменное имя узла сети. Если доменное имя недоступно, вместо него указывается IP-адрес |
| href: |
Полный адрес URL |
| pathname: |
Путь к объекту, указанный в адресе URL |
| port: |
Номер порта, используемого для передачи данных |
| protocol: |
Строка названия протокола передачи данных до символа двоеточия включительно |
| search: |
Строка запроса, указанная в адресе URL после символа «?» |
| target: |
Массив, содержащий все ссылки в документе HTML |
| length: |
Значение параметра target, заданное в ссылке |
Как вы понимаете, с помощью этого набора можно «разобрать» любую ссылку в документе, с которым приходится работать.
Сам по себе очень полезен объект history, три метода которого часто используются при навигации с помощью сценариев JavaScript.
document.history.back();
document.history.forward();
document.history.go(-1);
Первый метод отправляет браузер к предыдущему объекту последовательности history, второй, соответственно, к следующему. Третий метод использует параметр, показывающий расположение объекта, к которому нужно перейти, относительно текущего документа. В приведённом примере выполнение метода будет равносильно команде history.back().
Фу-у. Об этом пока всё. Через пару уроков нарисую диаграммку, иллюстрирующую всё это более наглядно.
Методы объекта document
Перечислю наиболее распространённые методы объекта document:
| write: |
Запись в документ произвольной конструкции языка HTML |
| writeln: |
Аналогично write, но в конце вывода добавялется символ новой строки |
| clear: |
Удаление содержимого документа из окна просмотра |
Тут всё ещё проще. Пишем в скрипте:
document.writeln("<p>Текст</p>");
и в том месте документа, где вызывается этот скрипт, появляется то, что заключено в кавычки. Чаще используется метод write, но тогда, если мы хотим получить нормальное завершение строки, пишем так:
document.write("<p>Текст</p>\n");
Символ «\n» как раз и означает перевод строки.
Метод clear мне пока использовать не приходилось (не было нужды), но можете поэкспериментировать: работает. ;-)
Заключение
Как я уже говорил, объект document — не самый старший в иерархии объектов, используемых в HTML и JavaScript, да и рассмотрели мы только самые основные его свойства. Но на следующем уроке мы продолжим разговор об объектной модели.
Ни для кого не секрет, что в результате войны браузеров, которая продолжалась годами и теперь потихоньку затухает, образовалось очень много различий между HTML, который понимает Internet Explorer, и HTML, понятным Netscape Navigator; это касается и сценариев, и CSS, и иерархии объектов, входящих в веб-страницы. С использованием диалекта языка JavaScript от Microsoft — JScript — и объектной модели Internet Explorer можно менять контент страницы в людой его точке без перезагрузки самой страницы. Эта гибкость, к сожалению, недоступна в тех случаях, когда разработчику приходится учитывать существование Netscape. Разговор о разнице в интерпретации кода этими двумя браузерами у нас с вами ещё впереди.
Урок 7. Слои | Урок 9. Объект Window
наверх
| 
