2014-02-10
476
Интерфейс HTMLDocument определяет операции, которые могут быть выполнены над документом HTML. Для этого интерфейса определены следующие свойства:
· anchors – содержит коллекцию всех элементов a с атрибутом name;
· applets – содержит коллекцию всех апплетов Java (элементы applet);
· forms – содержит коллекцию всех форм (элементы form);
· images – содержит коллекцию всех изображений (элементы img);
· links – содержит коллекцию всех гиперссылок (элементов a с атрибутом href);
· lastModified – возвращает дату последнего изменения документа в виде строки;
· URL – возвращает адрес данного документа HTML;
· domain – возвращает имя Web-сервера, обслуживающего документ HTML или null, если имя сервера не удалось опознать;
· referrer – возвращает URL документа HTML, из которого произошел переход в данный документ HTML;
· title – возвращает или устанавливает строковое содержимое заголовка документа (элемента title);
· cookie – возвращает или устанавливает строковое значение cookie.
Пример 4.5.13. Использование свойств интерфейса HTMLDocument:
1. Получение характеристик документа HTML в примере 4.5.1 (с учетом изменений, произведенных в примерах 4.5.5, 4.5.7, 4.5.8, 4.5.9, 4.5.10 и 4.5.11):
// Получение заголовка документа
docTitle = document.title;
// Получение даты и времени
// последней модификации документа
docLastMod = document.lastModified;
// Получение адреса документа
docURL = document.URL;
// Получение адреса документа,
// вызвавшего этот документ
docReferrer = document.referrer;
// Получение имени сервера
docDomain = document.domain;
// Вывод характеристик документа
alert("Характеристики документа:" +
"\n Заголовок: '" + docTitle + "'" +
"\n Последняя модификация: " + docLastMod +
"\n URL: '" + docURL + "'" +
"\n Вызван: '" + docReferrer + "'" +
"\n Сервер: '" + docDomain + "'");
Вывод Web-страницы для этого фрагмента сценария будет иметь следующий вид:
|
2. Получение значений атрибутов id и src элементов коллекции изображений документа HTML в примере 4.5.1 (с учетом изменений, произведенных в примерах 4.5.5, 4.5.7, 4.5.8, 4.5.9, 4.5.10 и 4.5.11):
// Получение коллекций изображений в документе
docImages = document.images;
// Начальное значение строки вывода
imgOutputString = "Количество изображений в документе=" +
docImages.length + ":";
// Получение значений атрибутов id и src
// элементов коллекции изображений в цикле
for(i = 0; i < docImages.length; i++)
// Добавление текстового содержимого
// текущего элемента коллекции в строку вывода
imgOutputString += "\n" + (i+1) + ". id='" +
docImages[i].getAttribute("id") + "' src='" +
docImages[i].getAttribute("src") + "'";
// Вывод атрибутов в элементах коллекции изображений
alert(imgOutputString);
Вывод Web-страницы для этого фрагмента сценария будет иметь следующий вид:
|
Для интерфейса HTMLDocument определены также следующие методы:
· open()– открывает документ HTML;
· close()– закрывает документ HTML;
· write(текст)– записывает текст в текущее место документа;
· writeln(текст)– записывает текст в текущее место документа, вставляя в конце текста символы возврата каретки и перевода строки;
· getElementsByName(значение) – возвращает коллекцию узлов типа NodeList с заданным значением атрибута name.
Пример 4.5.14. Использование методов интерфейса HTMLDocument:
Угадывание сгенерированного программой целого случайного числа в диапазоне от 1 до 5.
Документ HTML имеет следующий вид:
<?xml version="1.0" encoding="Windows-1251"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"https://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>
Использование методов интерфейса HTMLDocument
</title>
<style type="text/css">
* {font-weight: bold}
h1 {font-size: 24pt; color: brown}
p.right {color: red; font-size: 18pt}
p.wrong {color: blue; font-size: 18pt}
</style>
</head>
<body>
<h1>Угадайте число:</h1>
</body>
<script type="text/javascript">
// Генерация случайного числа
// в диапазоне от 0 до 4
computerNumber = 4*Math.random();
// Получение целого случайного числа в диапазоне
// от 1 до 5 с помощью округления
computerNumber = Math.round(computerNumber) + 1;
// Подсказка для ввода числа
yourNumber = prompt("Введите свое число:", "");
// Если число угадано
if(!isNaN(yourNumber) &&
parseInt(yourNumber) == computerNumber)
// Вывод сообщения - число угадано
document.writeln('<p class="right">Вы угадали!!! Это число ' + yourNumber + '</p>');
else
// Вывод сообщения - число не угадано
document.writeln('<p class="wrong">Число ' +
yourNumber + ' неверное</p>');
</script>
</html>
Вывод Web-страницы для трех случаев: при запросе на ввод числа, когда число не угадано и когда число угадано, приведен ниже:
|
|
|
