Объект Document

Объект Document

Для работы с документами HTML в языке JavaScript существует отдельный объект – Document. Пользуясь его свойствами и методами, сценарий JavaScript может получить информацию о текущем документе, загруженном в окно браузера, а также управлять отображением содержимого этого документа.

Любая веб-страница, которую вы просматриваете в окне браузера, может быть описана как набор объектов. Она включает собственно HTML-документ «в целом» и более мелкие объекты – элементы веб-страницы. Например, заголовок, абзац_1, абзац_2, абзац_3, рисунок, ссылка, форма и т. п.

HTML-документ «в целом» и есть объект Document. Элементы веб-страницы называются HTML-объектами, поскольку определяются элементами языка HTML. Все HTML-объекты выступают в качестве дочерних по отношению к объекту Document. Благодаря этому вы можете обращаться к данным объектам из сценариев JavaScript.

Совокупность описывающих веб-страницу объектов со всеми их методами и свойствами в языке JavaScript называется объектной моделью документа. Объект Document является главным в этой модели. Он содержит внутри себя множество подчиненных объектов и коллекций.

Коллекция – это массив объектов, проиндексированный не только по числовым номерам элементов, но и по их именам и имеющий свойства и методы. Коллекция отличается от обычного массива именно наличием свойств и методов. Поэтому каждая коллекция сама по себе объект и в то же время свойство объекта Document.

Рассмотрим, какие же коллекции существуют для объекта Document.

• anchors – коллекция всех локальных меток («якорей»), размещенных в HTML-документе. Эти метки содержатся в тегах <a name="…"> </a> и применяются для организации ссылок внутри одной веб-страницы.

• links – коллекция всех ссылок в HTML-документе, содержащихся в тегах <a href="…"> </a>.

• images – массив всех изображений на веб-странице.

• forms – коллекция всех форм в HTML-документе.

Благодаря этим коллекциям сценарию JavaScript доступны все локальные метки, формы, изображения и ссылки в HTML-документе как элементы соответствующих массивов.

Пример сценария, использующего одну из коллекций объекта Document, приведен в листинге 10.18.

Листинг 10.18. Использование коллекции anchors

<html>

<head>

<title>Anchors</title>

</head>

<body>

<!– Элементы страницы –>

<a name="first">1 anchor</a><br />

<a name="second">2 anchor</a><br />

<a name="third">3 anchor</a><br />

<br />Количество "якорей" в этом HTML-документе:

<!–Код JavaScript –>

<script language=JavaScript>

document.write(document.anchors.length)

</script>

</body>

</html>

Данный сценарий демонстрирует использование массива anchors для определения количества «якорей» в HTML-документе. Команда document. write отображает количество «якорей» на странице в числовом выражении (рис. 10.17).

Рис. 10.17. Использование коллекции anchors

Количество «якорей» подсчитывается с помощью команды document.anchors. length, где document – объект Document, anchor – массив всех «якорей» на веб-странице, а length – длина массива (то есть количество элементов в массиве).

Аналогично можно определить количество всех ссылок, изображений и форм на веб-странице. Для этого вместо коллекции anchors в строку document. anchors. length достаточно подставить названия массивов: links, images или forms.

Помимо коллекции, для объекта Document существуют свои свойства, анализируя которые, сценарий JavaScript может определить значения различных параметров веб-страницы. Рассмотрим эти свойства объекта Document.

• alinkColor – содержимое атрибута alink. Он определяет цвет ссылок, выбранных пользователем.

• linkColor – содержимое атрибута link, определяющего цвет еще не посещенных ссылок, размещенных в HTML-документе.

• vlinkColor – содержимое атрибута vlink. Он задает цвет уже посещенных ранее ссылок, размещенных в HTML-документе.

• bgColor – содержимое атрибута bgcolor. Применяется для создания цветного фона HTML-документа. Цвет задается либо в шестнадцатеричном виде (например, #F0F8FF), либо в виде названий цветов (например, red или white).

• fgColor – содержимое атрибута text, определяющего цвет текста. Задается таким же образом, что и цвет фона веб-страницы bgcolor.

• lastModified – дата последнего изменения HTML-документа.

• location – полный URL-адрес текущей веб-страницы.

• referrer – URL-адрес страницы, с которой была открыта данная веб-страница.

• title – заголовок документа, заданный с помощью элемента TITLE.

• URL – полный URL-адрес HTML-документа.

Многие из перечисленных свойств объекта Document позволяют динамически изменять значения HTML-элементов, расположенных в блоке BODY. Например, фоновый цвет страницы, цвет ссылок, содержание заголовка документа.

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

Листинг 10.19. Свойства объекта Document

<html>

<head>

<title> Свойства объекта Document</title>

<!–Код JavaScript –>

<script language="JavaScript">

document.bgColor = "#00FF80";

document.fgColor = "#800080";

document.linkColor = "#000000";

document.alinkColor = "#FF0000";

document.vlinkColor = "#4000FF";

</script>

</head>

<body bgcolor=white>

<h1>Изменение цветового оформления страницы</h1>

<h3>Щелкните по этим ссылкам: </h3>

<p><a href="http://www.yandex.ru">Yandex</a>

<p><a href="http://www.mail.ru">Бесплатная электронная почта</a>

<p><a href="http://www.microsoft.com">Сервер Microsoft</a>

</body>

</html>

Результат работы сценария показан на рис. 10.18.

Рис. 10.18. Изменение цвета фона, текста и ссылок

Обратите внимание, что данный сценарий переопределяет цвет фона веб-страницы, заданный параметром bgcolor=white в элементе BODY: document. bgColor = «#00FF80».

Рассмотрим еще один пример сценария, в котором используется свойство lastModified объекта Document (листинг 10.20).

Листинг 10.20. Использование свойства lastModified

<html>

<head>

<title> Свойство lastModified</title>

</head>

<body>

<center>

<!–Код JavaScript –>

<script language="JavaScript">

document.write("Последний раз страница редактировалась:<br>" +document. lastModified)

</script>

</center>

</body>

</html>

Свойство lastModified позволяет узнать дату внесения последних изменений в содержание HTML-документа. В сценарии это реализовано в команде document.lastModified. Строка document. write() помещает полученную дату на веб-страницу (рис. 10.19).

Рис. 10.19. Использование свойства lastModified

Во многих рассмотренных ранее примерах сценариев JavaScript вам не раз встречалась строка document. write(). Write() – это метод объекта Document, позволяющий отображать какую-либо информацию на веб-странице. Кроме этого широко используемого метода, сценарии JavaScript могут вызывать и другие методы, определенные для объекта Document.

• close() – заставляет веб-страницу немедленно обновить свое содержимое после использования метода write(). Метод close() не имеет параметров и не возвращает значения. Поддерживается Internet Explorer, начиная с версии 4.0.

• getElementsByName({имя_элемента}) – возвращает элемент, специфическое имя которого передано в качестве параметра. Данный метод поддерживается браузером Internet Explorer, начиная с версии 5.0.

• getElementByld ({ID}) – возвращает элемент, имя которого передано в качестве параметра. Имя элемента страницы задается атрибутом ID. Метод getElementById() имеет единственный параметр – имя элемента страницы. Поддерживается браузером Internet Explorer, начиная с версии 5.0.

• getElementsByTagName({Имя тега}) – возвращает тег, имя которого передано в качестве параметра. Поддерживается браузером Internet Explorer, начиная с версии 5.0.

• write() – записывает текст или HTML-код в текущее место документа.

В браузере Microsoft Internet Explorer версии 5.0 появилась поддержка таких методов объекта Document, как getElementById(), getElementsByName() и getElementsByTagName(). Последний используется в сценариях JavaScript особенно часто. Рассмотрим пример такого сценария (листинг 10.21).

Листинг 10.21. Использование метода getElementsByTagNameO

<html>

<head>

<title> Метод getElementsByTagName()</title>

<!–Код JavaScript –>

<script language="JavaScript">

function getElements() //функция

{

var x=document.getElementsByTagName("input");

alert(x.length);

}

</script>

</head>

<body>

<!–Форма –>

<input name="myInput" type="text" size="30" /><br />

<input name="myInput" type="text" size="30" /><br />

<input name="myInput" type="text" size="30" /><br />

<br />

<input type="button" onclick="getElements()" value="Посчитаем элементы input" />

</body>

</html>

Данный сценарий содержит функцию getElements(), которая производит подсчет всех элементов типа INPUT на веб-странице, а затем выводит результат в окне Alert (рис. 10.20).

Рис. 10.20. Окно с количеством элементов

Функция срабатывает при нажатии кнопки в форме. Как видите, в этом HTML-документе содержится четыре элемента, обозначенные элементом INPUT: три поля для ввода и кнопка (рис. 10.21).

Рис. 10.21. Элементы INPUT

Итак, мы рассмотрели один из главных объектов в языке JavaScript – объект Document, представляющий собой веб-страницу, загруженную в окно браузера. Благодаря определенным свойствам и методам через объект Document можно получить доступ к любым другим объектам, расположенным на веб-странице.

Поделитесь на страничке

Следующая глава >

Похожие главы из других книг

document.write против innerHTML

Из книги Разгони свой сайт автора Мациевский Николай

document.write против innerHTML Контекстная реклама, пожалуй, является одним из главных «тормозов» при загрузке страницы (при прочих равных условиях), ибо активно применяет document.write, который «морозит» загрузку до получения всех необходимых JavaScript-файлов с внешних серверов.


Применение модели Document Object Model

Из книги Обработка баз данных на Visual Basic®.NET автора Мак-Манус Джеффри П

Применение модели Document Object Model С появлением модели Document Object Model (DOM) значительно упростилось создание динамически генерируемых Web-узлов, благодаря приданию дополнительных функциональных возможностей статическим элементами в документах HTML/XML. Простая строка кода


Объект Date

Из книги Windows Script Host для Windows 2000/XP автора Попов Андрей Владимирович

Объект Date Для создания нового объекта встроенного класса Date используется один из трех конструкторов.Конструктор первого вида позволяет создать объект, в котором хранится информация о текущих дате и времени:var d;d = new Date();Здесь время задается по Гринвичу, т.е. с


Объект document

Из книги Справочник по JavaScript автора Коллектив авторов

Объект document Прежде всего надо отметить, что объект document существует в единственном экземпляре для всего HTML-документа. Он присутствует всегда, если существует HTML-документ, поэтому специально создавать его не требуется.activeElementИспользуется в сценарии для получения ссылки


Подчиненные объекты и коллекции объекта document

Из книги XSLT автора Хольцнер Стивен

Подчиненные объекты и коллекции объекта document Объект document содержит внутри себя множество подчиненных объектов и коллекций. В следующей таблице перечисленны свойства, возвращающие ссылки на них, и приведены описания соответствующих объектов и коллекций.Коллекция all


Объект layer

Из книги Технология XSLT автора Валиков Алексей Николаевич

Объект layer Все слои, определенные в документе, доступны как элементы коллекции layers.document.layers[2];document.layers["somelayer"];NN поддерживает прямой доступ к слоям по имени. Имена слоям даются с помощью атрибута NAME тегов <LAYER> и <ILAYER>:document.somelayer;Для доступа к слою, находящемуся внутри


Объект navigator

Из книги Приемы создания интерьеров различных стилей автора Тимофеев С. М.

Объект navigator Объект navigator служит для доступа к самой программе Web-обозревателя. Не путайте его с объектом window, представляющем текущее окно Web-обозревателя, и названием программы Netscape Navigator.appCodeNameВозвращает имя кода программы Web-обозревателя. И для Internet Explorer, и для Navigator


Объект screen

Из книги автора

Объект screen Объект screen служит для доступа к характеристикам видеосистемы компьютера клиента.availHeightВозвращает высоту полезной области экрана без панели задач и подобных ей элементов графического интерфейса системы.availWidthВозвращает ширину полезной области экрана без


Элемент : создание нескольких выходных документов

Из книги автора

Элемент <xsl:document>: создание нескольких выходных документов В рабочем проекте XSLT 1.1 был представлен новым элемент, <xsl:document>, предназначенный для поддержки нескольких выходных документов, — и, скорее всего, этот элемент будет добавлен в XSLT 2.0. Он имеет следующие


document()

Из книги автора

document() Функция document особенно полезна, потому что с ее помощью можно читать несколько документов и обрабатывать их содержимое. Функция document применяется следующим образом:node-set document(uri, base-uri?)Функция принимает параметр uri, который может представлять собой URI читаемого


Вызов document(string)

Из книги автора

Вызов document(string) В случае если функции document передана строка, возвращаемое множество будет состоять из корневого узла внешнего документа. URI этого документа как раз и сообщается строковым аргументом функции document.Интересной особенностью является возможность передать


Вызов document(node-set)

Из книги автора

Вызов document(node-set) Передавая функции document множество узлов, можно получить доступ к нескольким документам, URI которых являются строковыми значениями узлов множества. Это, в частности, позволяет обращаться к документам, URI которых указаны в узлах обрабатываемого документа.


Вызов document(node-set, node-set)

Из книги автора

Вызов document(node-set, node-set) Если функции document передаются два множества узлов, то вычисление результата можно описать примерно следующим образом:? каждый из узлов первого аргумента преобразуется в строковый вид;? для каждого из полученных значений выполняется вызов типа


Объект

Из книги автора

Объект Все, что находится в трехмерном виртуальном пространстве сцены — это объекты. Термин "объект" обозначает нечто, находящееся в трехмерном мире. Что бы мы ни создали в виртуальном пространстве, это будет объект.Существует множество видов объектов. Принадлежность