vvz.nw.ru Примеры к занятиям по JavaScript

<< Объект Document

Объект Document особенно важен при разработке сценариев. Приведенная здесь схема иерархии объектов включает только основные свойства этого объекта, определенные в базовой объектной модели документа (Document Object Model Level 0 - DOM0). На поддержку этих свойств можно смело рассчитывать при использовании любого относительно современного браузера. Более поздние стандарты DOM1 и DOM2 представляют документ HTML в виде дерева и дают доступ ко всем элементам, несравненно расширяя возможности разработчика. Однако, в этом разделе рассмотрим лишь базовые возможности.

Свойства объекта Document

Начнем со скалярных свойств, общих для всех браузеров. Большинство их доступны как для чтения, так и для изменения. Отметим, что значения свойств, связанных с цветами текста, фона и гиперссылок, можно изменять динамически лишь в тех случаях, когда не заданы соответствующие описания CSS, которые имеют больший приоритет. Все значения свойств - строковые.

Более интересны и полезны для разработчика свойства-массивы объекта Document. Все они, естественно, имеют свойство length (количество элементов в массиве). Большинство свойств, специфичных для объектов, хранящихся в этих массивах, ассоциируются с атрибутами соответствующих элементов HTML. Вот лишь некоторые из них, понятные без объяснений любому, кто знает HTML:

К объектам документа, хранящимся в массивах images, forms и applets, а также к элементам форм можно обращаться и по имени, если в начальном теге соответствующего элемента HTML задан атрибу name. Пусть, например, в документе описано изображение
<img src="images/cat.jpg" id="cat_id" name="cat_name">
и оно является n-ым изображением, встречающимся в документе. К этому элементу img можно обратиться по крайней мере следующими способами (см. раздел Идентификация элементов документа):

  1. Как к элементу массива images , используя его индекс (индексация начинается с 0):
    window.document.images[n-1]
     
  2. Как к элементу массива images , используя значение атрибута name как ключ массива:
    window.document.images['cat_name']
  3. Используя значение атрибута name как свойство объекта :
    window.document.cat_name
     
  4. Используя значение атрибута id и свойство getElementById:
    window.document.getElementById('cat_id')
     

Методы объекта Document

Методы write() и writeln() весьма полезны и часто используются для динамического формирования содержимого документа. Вот как, например, можно включить в документ дату его последнего изменения:

<script type="text/JavaScript"> window.document.write(document.lastModified); </script>

Получится (для того документа, который вы сейчас видите):

Обратите внимание на то, что метод write() для текущего документа может применяться только в сценарии, формирующем документ на стадии его загрузки (то есть он может присутствовать в элементах script, включенных в тело документа body). Любые попытки выполнить этот метод для текущего документа в обработчике некоторого события приведет к очистке содержимого документа. А вот в случае реализации фреймовой структуры или наличия в документе встроенных фреймов iframe, этот метод можно применить и в обработчике события для модификации содержимого документов дочерних фреймов. При этом метод write() добавляет контент в указанный фрейм, не обнуляя его содержимое. При этом к фрейму следует обращаться по данному ему имени.

Например, если в текущем документе определен некий встроенный фрейм с именем "child":

<iframe src="empty.htm" name="child"></iframe>

в него можно добавить новый контент, задав в обработчике некоторого события инструкцию:

child.document.write('... текст с соответствующими тегами ...')

 



vvz.nw.ru  > JavaScript