• search – строка параметров для серверных сценариев, начинается со знака?.
Команды host, hostname, port, search не работают, если просматривать страницу с жесткого диска компьютера. Результат может быть только в том случае, если веб-страница размещается на сервере в Интернете.
Внимание!
Поскольку объект Location является частью объекта Window, доступ к нему осуществляется именно через этот объект: window.location.property.
Рассмотрим использование свойств объекта Location на примере сценария из листинга 10.16.
Листинг 10.16. Свойство href объекта Location<html>
<head>
<title>URL текущего HTML-документа</title>
</head>
<body>
<script language=JavaScript>
<!– Маскировка сценария
document.write(location.href); //код JavaScript
// Конец маскировки сценария –>
</script>
</body>
</html>
Данный сценарий определяет полный URL-адрес текущего HTML-документа. При запуске сценария с жесткого диска вашего компьютера команда location. href покажет полный путь к файлу со сценарием (рис. 10.15).
Рис. 10.15. Путь к файлу со сценарием
Методы объекта Location позволяют перезагружать текущую веб-страницу или менять URL-адрес, загружать другую веб-страницу вместо предыдущей. При этом будет невозможен переход к предыдущей странице с помощью кнопки Назад в браузере пользователя. Возникает эффект, что страницы как бы подменяются друг другом.
Рассмотрим подробнее методы объекта Location.
• assign() – загружает другую страницу, меняя URL-адрес текущей веб-страницы на адрес, указанный в параметре метода.
• reload() – обновляет текущую веб-страницу (не всегда срабатывает правильно, поскольку некоторые браузеры все равно берут эту страницу из кэша, не обращаясь к серверу).
• replace() – замена текущей веб-страницы страницей, URL которой указан в параметре метода. При этом в списке истории браузера адрес предыдущего HTML-документа заменяется адресом нового.
В листинге 10.17 приведен пример сценария, содержащего один из методов объекта Location – метод replace().
Листинг 10.17. Использование метода replace()<html>
<head>
<title>Метод replace()</title>
<script language=JavaScript>
<!– Маскировка сценария
function replaceDoc()
{
window.location.replace("http://www.yandex.ru") //код JavaScript
}
// Конец маскировки сценария –>
</script>
</head>
<body>
<input type="button" value="Replace" onclick="replaceDoc()" /> //кнопка
</body>
</html>
Сценарий позволяет изменить текущую страницу в окне браузера на главную страницу сайта www.yandex.ru. За это отвечает функция replaceDoc(), которая вызывается при нажатии кнопки Replace (рис. 10.16).
Рис. 10.16. Кнопка Replace
Таким образом, объект Location позволяет не только определять адрес загруженного в браузер HTML-документа, но, что более важно, загружать в текущее окно новую вебстраницу.
Итак, мы рассмотрели объекты браузера, их свойства и методы. Для HTML-документа и его содержимого в языке JavaScript также определены свои объекты.
10.4. Объектная модель документа (DOM)
Стандартный набор объектов в HTML-документе, их свойства и способ доступа к ним определяется объектной моделью документа (Document Object Model, сокращенно DOM). DOM позволяет управлять всеми элементами на веб-странице, изменять их свойства и содержание, создавать новые элементы.
Объект 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>