Объект history. Получение информации о просмотренных страницах. Реализация перехода на предыдущую просмотренную страницу
Объект history предоставляет доступ к списку всех просмотренных Web-
страниц за последнее время.
Свойство length объекта history возвращает размер списка истории.
Методы объекта history:
? back() загружает в окно Web-браузера предыдущий документ из списка истории;
? forward() загружает в окно Web-браузера следующий документ из спи-
ска истории;
? go(<Позиция>) перемещается в списке истории на позицию, номер кото-
рой указан в качестве параметра.
Листинг 3.57 демонстрирует, как реализовать ссылку на предыдущую просмотренную Web-страницу.
Листинг 3.57. Переход на предыдущую Web-страницу
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Переход на предыдущую Web-страницу</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-
1251">
</head>
<body>
<h1 style="text-align: center">Переход на предыдущую Web-страницу</h1>
<p><a href="javascript:history.back();">Перейти</a></p>
</body>
</html>
3.17.10. Объект document. Получение полной информации о HTML-документе
Объект document предоставляет доступ ко всем элементам Web-страницы.
Свойства объекта document:
? activeElement — ссылка на активный элемент документа;
? documentElement — ссылка на корневой элемент (тег <html>);
? body — ссылка на все содержимое тега <body>;
? title — название документа, указанное в теге <title>;
? URL — URL-адрес документа;
? referrer — URL-адрес, с которого перешел посетитель по ссылке;
? parentWindow — окно, которому принадлежит документ;
? cookie — объект cookie, который позволяет сохранять данные на компь-
ютере клиента (см. разд. 3.17.18);
? readyState — статус документа. Возвращает следующие строковые зна-
чения:
• complete — документ полностью загружен;
• interactive — документ загружен не полностью, но доступен для просмотра и управления;
• loading — документ загружается;
• uninitialized — документ не доступен;
? location — объект location;
? selection — объект selection;
? fileCreatedDate — дата создания файла документа в виде строки;
? fileModifiedDate — дата последнего изменения файла документа в виде строки;
? fileUpdatedDate — дата последнего изменения файла сервером в кэше компьютера пользователя;
? lastModified — дата и время последнего изменения файла документа в виде строки;
? fileSize — размер файла в виде строки;
? bgColor — цвет фона страницы;
? fgColor — цвет текста страницы;
? linkColor — цвет гиперссылок документа;
? alinkColor — цвет активных гиперссылок;
? vlinkColor — цвет посещенных гиперссылок.
Методы объекта document:
? getElementById(<Идентификатор>) возвращает ссылку на элемент с ука-
занным идентификатором;
? getElementsByName(<Название элемента>) возвращает ссылку на кол-
лекцию элементов, у которых параметр name равен значению аргумента;
? getElementsByTagName(<Тег>) возвращает ссылку на коллекцию дочер- них элементов, созданных с использованием тега, переданного в качестве параметра;
? elementFromPoint(<x>, <y>) возвращает ссылку на элемент, находящий-
ся по координатам <x> и <y>;
? write(<Текст>) записывает текст, переданный как параметр, в текущее место документа;
? writeln(<Текст>) записывает текст, переданный как параметр, в текущее место документа, а в конце строки добавляет символы возврата каретки и перевода строки. Добавляемые символы полностью игнорируются Web- браузерами, поэтому результат будет таким же, как и в случае с методом write().
Коллекции объекта document:
? all — коллекция всех элементов;
? anchors — коллекция "якорей", заданных тегом <a>;
? forms — коллекция всех форм;
? frames — все фреймы;
? images — коллекция всех изображений;
? links — коллекция ссылок;
? scripts — коллекция скриптов;
? styleSheets — коллекция стилей.
Общие свойства
и методы элементов Web-страницы
Все элементы Web-страницы также имеют свойства и методы. Помимо свойств, специфических для конкретных элементов, все они имеют следую- щие общие свойства:
? all — ссылка на коллекцию дочерних элементов;
? id — имя элемента, заданное параметром id;
? className — имя класса, заданное параметром class элемента Web-
страницы;
? sourceIndex — порядковый номер элемента, который можно использо-
вать для ссылки на элемент из коллекции all;
? tagName — имя тега элемента;
? parentElement — ссылка на элемент-родитель;
? length — число элементов в коллекции;
? height и width — высота и ширина элемента;
? clientHeight и clientWidth — высота и ширина элемента без учета ра-
мок, границ, полос прокрутки и т. п.;
? clientLeft — смещение левого края элемента относительно левого края элемента-родителя без учета рамок, границ, полос прокрутки и т. п.;
? clientTop — смещение верхнего края элемента относительно верхнего края элемента-родителя без учета рамок, границ, полос прокрутки и т. п.;
? offsetHeight и offsetWidth — высота и ширина элемента относительно элемента-родителя;
? offsetLeft — смещение левого края элемента относительно левого края элемента-родителя;
? offsetParent — ссылка на элемент-родитель, относительно которого опре-
деляются свойства offsetHeight, offsetWidth, offsetLeft и offsetTop;
? offsetTop — смещение верхнего края элемента относительно верхнего края элемента-родителя;
? innerText — содержимое элемента, исключая теги HTML. Если присво-
ить свойству новое значение, то содержимое элемента изменится;
? outerText — содержимое элемента, исключая теги HTML. Если присво- ить свойству новое значение, то содержимое элемента заменится новым, и сам элемент будет заменен;
? innerHTML — содержимое элемента, включая внутренние теги HTML.
Если присвоить свойству новое значение, то содержимое элемента также
изменится;
? outerHTML — содержимое элемента, включая теги HTML. Если присвоить свойству новое значение, то содержимое элемента заменится новым, а сам элемент будет заменен;
? scrollHeight и scrollWidth — полная высота и ширина содержимого элемента;
? scrollLeft и scrollTop — положение горизонтальной и вертикальной полос прокрутки.
Общие методы элементов Web-страницы:
? getAdjacentText(<Местонахождение>) возвращает текстовую строку в зависимости от заданного местонахождения;
? insertAdjacentHTML(<Местонахождение>, <Текст>) позволяет вставить текст в место, заданное местонахождением. Текст может содержать HTML-теги;
? insertAdjacentText(<Местонахождение>, <Текст>) дает возможность вставить текст в место, заданное местонахождением. Текст не должен со- держать HTML-тегов;
? replaceAdjacentText(<Местонахождение>, <Текст>) позволяет заменить текст другим текстом в месте, заданном местонахождением;
В этих методах <Местонахождение> может принимать следующие значе-
ния:
• BeforeBegin — текст, находящийся перед открывающим тегом эле-
мента;
• AfterBegin — текст, находящийся после открывающего тега элемен-
та, но перед всем содержимым текущего элемента;
• BeforeEnd — текст, находящийся перед закрывающим тегом элемен-
та, но после всего содержимого элемента;
• AfterEnd — текст, находящийся после закрывающего тега элемента;
? getAttribute(<Имя параметра>, true | false) возвращает значение параметра с именем <Имя параметра> тега текущего элемента. Если вто- рой параметр равен false, то поиск параметра тега производится без уче- та регистра символов;
? setAttribute(<Имя параметра>, <Значение>, true | false) присваи- вает <Значение> параметру с именем <Имя параметра> тега текущего эле- мента. Если третий параметр равен false, то поиск параметра тега произ- водится без учета регистра символов;
? removeAttribute(<Имя параметра>, true | false) удаляет параметр тега текущего элемента. Если второй параметр равен false, то поиск па-
раметра тега производится без учета регистра символов. Возвращает зна-
чение true, если удаление было выполнено успешно;
? clearAttributes() удаляет все параметры тега элемента кроме парамет-
ров id и name;
? contains(<Имя элемента>) возвращает true, если элемент с этим именем содержится внутри текущего элемента;
? getElementsByTagName(<Тег>) возвращает ссылку на коллекцию дочер- них элементов, созданных с использованием тега, переданного в качестве параметра;
? scrollIntoView(true | false) вызывает прокрутку страницы в окне так, чтобы текущий элемент оказался в поле зрения. Если параметр равен true, то текущий элемент окажется у верхнего края окна, а если false — то у нижнего края.
Получение информации о HTML-документе
В качестве примера использования свойств документа и его элементов рас- смотрим листинг 3.58. Он демонстрирует получение полной информации о HTML-документе.
Листинг 3.58. Объект document
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Объект document</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-
1251">
</head>
<body>
<div><a href="doc1.html" id="link1">Ссылка</a></div>
<script type="text/javascript">
<!-
document.write(document.URL + " – URL-адрес документа.<br>"); document.write(document.location.href + " – URL-адрес документа.<br>"); document.write(document.title + " – название документа.<br>"); document.title = "Новое название";
document.write(document.title + " – измененное название документа.<br>"); document.write(document.readyState + " – статус документа.<br><br>"); document.write(document.fileCreatedDate + " – дата "); document.write("создания файла документа.<br>"); document.write(document.fileModifiedDate + " – дата "); document.write("последнего изменения файла документа.<br>"); document.write(document.lastModified + " – дата и "); document.write("время последнего изменения файла документа.<br>"); document.write(document.fileSize);
document.write(" – размер файла.<br><br>");
document.write("Цвет элементов до изменения параметров:<br><br>"); document.write(document.bgColor + " – цвет фона страницы;<br>"); document.write(document.fgColor + " – цвет текста страницы;<br>"); document.write(document.linkColor);
document.write(" – цвет гиперссылок документа;<br>");
document.write(document.alinkColor);
document.write(" – цвет активных гиперссылок;<br>");
document.write(document.vlinkColor);
document.write(" – цвет посещенных гиперссылок.<br><br>");
document.bgColor = "#009000"; document.fgColor = "#FFFFFF"; document.linkColor = "#FFFFFF"; document.alinkColor = "red"; document.vlinkColor = "black";
document.write("Цвет элементов после изменения параметров:<br><br>"); document.writeln(document.bgColor + " – цвет фона страницы;<br>"); document.writeln(document.fgColor + " – цвет текста страницы;<br>"); document.writeln(document.linkColor);
document.write(" – цвет гиперссылок документа;<br>"); document.writeln(document.alinkColor); document.write(" – цвет активных гиперссылок;<br>"); document.writeln(document.vlinkColor);
document.write(" – цвет посещенных гиперссылок.<br><br>");
if (document.all) { document.write(document.all.link1.tagName); document.write(" – имя тега с id = link1.<br>");
}
document.write(document.getElementById("link1").innerHTML); document.write(" – содержимое тега с id = link1.<br>"); document.getElementById("link1").innerHTML = "Новый текст ссылки"; document.write(document.getElementById("link1").innerHTML); document.write(" – новое содержимое тега с id = link1.<br>");
//->
</script>
<div style="margin-top: 300px">
<input type="button" value="Нажмите, чтобы увидеть ссылку" onclick="document.getElementById(‘link1′).scrollIntoView();"></div>
</body>
</html>
Источник: Прохоренок Н. А. HTML, JavaScript, PHP и MySQL. Джентльменский набор Web-мастера. — 3-е изд., перераб. и доп. — СПб.: БХВ-Петербург, 2010. — 912 с.: ил. + Видеокурс (на CD-ROM) — (Профессиональное программирование)
Похожие посты:
- Что такое селекторы и как их правильно использовать (0)
- Изменение стиля горизонтальной линии (0)
- Удаление отступов по умолчанию для всех элементов страницы (0)
- Задание фонового изображения для страницы с помощью CSS (0)
- Для каких элементов можно задавать фоновое изображение (0)
- Как задать для документа более одного фонового изображения (0)
- Выбор единиц измерения размера шрифтов:пикселы, пункты, пики или что-то другое (0)
