HTML, XHTML и CSS на 100%
Шрифт:
• links – коллекция всех ссылок в HTML-документе, содержащихся в тегах <a href="#"> </a>.
• images – массив всех изображений на веб-странице.
• forms – коллекция всех форм в HTML-документе.
Благодаря этим коллекциям сценарию JavaScript доступны все локальные метки, формы, изображения и ссылки в HTML-документе как элементы соответствующих массивов.
Пример сценария, использующего одну из коллекций объекта Document, приведен в листинге 10.18.
<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).
<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>
<a href="#">Yandex</a>
<a href="#">Бесплатная электронная почта</a>
<a href="#">Сервер Microsoft</a>
</body>
</html>
Результат работы сценария показан на рис. 10.18.
Рис. 10.18. Изменение цвета фона, текста и ссылок
Обратите внимание, что данный сценарий переопределяет цвет фона веб-страницы, заданный параметром bgcolor=white в элементе BODY: document. bgColor = «#00FF80».
Рассмотрим еще один пример сценария, в котором используется свойство lastModified объекта Document (листинг 10.20).
<html>
<head>
<title> Свойство lastModified</title>
</head>
<body>
<center>
<!–Код JavaScript –>
<script language="JavaScript">
document.write("Последний раз страница редактировалась:<br>" +document. lastModified)
</script>
</center>
</body>
</html>