Добавлен: 16.03.2024
Просмотров: 114
Скачиваний: 0
ВНИМАНИЕ! Если данный файл нарушает Ваши авторские права, то обязательно сообщите нам.
СОДЕРЖАНИЕ
147
z
5
Сохраните в одной папке HTML-документ и файл сценария JavaScript, затем очистите историю браузера.
z
6
Откройте первую страницу, чтобы увидеть, что начальная длина истории равна 1.
z
7
Щелкните ссылку, чтобы загрузить третью страницу и увидеть, как длина истории уве- личивается до 2.
z
8
Для возврата на первую страницу нажмите кнопку Back (Назад). Длина истории оста- нется такой же — 2.
URL-адреса хра- нятся в элементах массива объекта history в защищен- ном виде, поэто- му их невозмож- но получить в виде строк.
В этом примере каждый URL-адрес добавляется в мас- сив history толь- ко при переходе на другую страни- цу и при нажатии на ссылку. Методы back( )
, forward( )
и go( )
просто выбира- ют элемент в history
, поэтому свой- ство length остается неизменным.
148
Открытие ок он и ме то ды об ъекта windo w
Заключение
z
Объектная модель документа (DOM) — это ие- рархическая структура для всех компонентов веб-страницы.
z
Объект window
— верхний уровень иерархии
DOM и содержит свой ства, описывающие окно браузера.
z
Объект screen
— дочерний объект по отношению к объекту window и содержит свой ства, описываю- щие размеры экрана и глубину цвета.
z
Объект window содержит методы scrollBy( )
и scrollTo( )
, а также свой ства scrollX
и scrollY
, опре- деляющие позицию прокрутки.
z
Диалоговые сообщения могут отображаться при использовании методов alert( )
, confi rm( )
и prompt( )
z
Всплывающее окно создается с помощью метода open( )
и может быть заблокировано блокировщи- ком всплывающих окон.
z
Метод setTimeout( )
создает таймер, который мож- но отменить с помощью метода clearTimeout( )
z
Объект navigator
— дочерний объект по отношению к объекту window и содержит свой ства, описываю- щие версии браузера и серверные платформы.
z
Объект window существует в глобальном простран- стве имен, поэтому все его дочерние объекты не обязательно должны включать префикс window
z
Обнаружение функций используется для иденти- фикации современной модели DOM.
z
Свой ства navigator.plugins и navigator.mimeTypes пред- ставляют собой массивы, содержащие сведения о поддерживаемых функциях.
149
z
Объект location
— дочерний объект по отноше- нию к объекту window и содержит свой ства, опи- сывающие адрес загруженного документа.
z
Объект history
— дочерний объект по отношению к объекту window
, содержащий массив посещен- ных адресов текущей сессии.
z
Объект history содержит методы back( )
, forward( )
и go( )
, которые используются для перемещения по страницам в текущей сессии.
В этой главе вы изучите,
как использовать
в JavaScript свой ства
и методы объекта document.
Работа с документом
Свой ства интерфейса
Document
Получение элементов
Работа с текстом
Управление файлами cookie
События загрузки
Ответ на события мыши
Генерация событий
Добавление переключателей
Добавление элементов выбора
Сброс формы
Проверка и отправка формы
Заключение
150 152 154 156 159 161 164 166 168 170 172 175 177
Методы и свойства объекта document
7
152
М
е то ды и свойства об ъекта document
Работа с документом
Объект document
— наиболее интересный из всех дочерних объектов DOM. Он обеспечивает доступ к HTML-документу.
Объект document определяет ряд свой ств, описываю- щих документ и его расположение.
z
Свой ство document.title устанавливает или воз- вращает заголовок текущего HTML-документа.
z
Свой ство location.href устанавливает или возвра- щает полный URL-адрес текущей страницы.
z
Свой ство document.domain возвращает доменное имя сервера, на котором загружен текущий доку- мент, аналогично значению location.host.
z
HTML-документы предоставляют браузеру дату своего создания или последнего изменения в виде заголовка HTTP, чтобы браузер мог решить, ис- пользовать ли кэшированную копию документа или новый документ. Также дату и время послед- него изменения текущего документа можно полу- чить, используя свой ство document.lastModifi ed.
z
Свой ство document.referrer возвращает URL-а- дрес документа, в который загружен текущий до- кумент. Оно используется, только если пользова- тель перешел по гиперссылке для загрузки стра- ницы, а не ввел URL-адрес или использовал какой-либо другой метод.
z
1
Создайте HTML-документ, содержащий в основном разделе гиперссылку на второй
(целевой) HTML-документ.
info-2.html
" >
Link to the Next Page z
2
Создайте целевой HTML-документ, содер- жащий пустой неупорядоченный список.
info-1..html info-1..html
153
z
3
Создайте самовызывающуюся функцию, про- инициализируйте ссылку на переменную.
const list
= document.getElementById( '
list
' )
z
4
Для перечисления свой ств документа добавь- те операторы.
list
.innerHTML = '
' + document.referrer list
.innerHTML += '
' + document.title list
.innerHTML += '
' + document.URL
list
.innerHTML += '
' + document.domain list
.innerHTML += '
' + document.lastModifi ed z
5
Сохраните HTML-документы в той же пап- ке, затем откройте документ, содержащий ссылку, в своем браузере.
z
6
Щелкните гиперссылку, чтобы загрузить второй
HTML-документ в браузере и проанализируйте полученную информацию о документе.
Дата, содержа- щаяся в свой- стве document.
lastModifi ed, относит- ся только к самому
HTML-документу, а не к каким-либо внешним таблицам стилей или внеш- ним файлам сце- нариев.
Показанный здесь домен — это до- мен страницы, расположенной в локальной систе- ме на веб-серве- ре. В случае распо- ложения страницы на вашем рабо- чем столе свой- ства document.
referrer и document.
domain не имели бы никаких значений.
154
М
е то ды и свойства об ъекта document
Свой ства интерфейса
Document
Объект document содержит следующие дочерние объ- екты: forms
, images
, links
, styleSheets и scripts
. Каждый из них — это массив, в котором всякий элемент представляет компонент документа в том же порядке, в котором они появляются в HTML-документе. На- пример, первое изображение, заданное тегом HTML
, представлено как document.images[0]
. Это означа- ет, что на его URL-адрес можно ссылаться, используя запись document.images[0].src
, которая определяет путь, назначенный атрибуту src тега HTML
. Новый
URL-адрес в сценарии будет динамически заменять старое изображение новым.
Массив links в HTML-документе представляет кол- лекцию всех элементов
; свой ство styleSheets
—
155
z
2
Для стилизации шрифта и формы добавьте таблицу стилей.
< style>
* { font :
1em sans-serif
; } form {
width :
500px
; height :
100px
;
background: url(bg.png)
; }
z
3
Затем создайте самовызывающуюся функ- цию. Объявите и проинициализируйте ссыл- ку на переменную.
const list
= document.getElementById( '
list
' )
z
4
Добавьте в список компонентов документа следующие операторы.
list
.innerHTML = '
' + document.forms.length list
.innerHTML += '
' + document.links.length list
.innerHTML += '
' + document.images.length list
.innerHTML += '
' + document.
styleSheets.length list
.innerHTML += '
' + document.scripts.length z
5
Наконец, добавьте операторы, чтобы пере- числить два значения атрибутов.
list
.innerHTML += '
' + document.
images[ 0 ].src list
.innerHTML += '
' + document.forms[ 0 ].elements[ 0 ].value z
6
Сохраните HTML-документ, затем откройте его в браузере. Проанализируйте получен- ные результаты — отображение компонентов документа в виде списка.
156
М
е то ды и свойства об ъекта document
Заметьте, что изображения, добавленные в доку- мент согласно правилам стиля, не включаются в мас- сив images
; в него входят только те, которые включе- ны с помощью тегов HTML
. Поэтому в нашем примере фоновое изображение формы (
bg.png
) не отображается в массиве images
. Точно так же пра- вило стиля работает с массивом styleSheets
Получение элементов
Использование для ссылки на конкретный элемент точечной нотации предполагает, что разработчик подсчитает количество компонентов для вычисления каждой позиции индекса. Это особенно утомительно для работы с объемными документами, так как воз- никает риск появления ошибок, а при редактирова- нии HTML-документа может измениться позиция индекса элемента. Прежде это было необходимо, но позднее к объекту document было решено доба- вить три новых метода:
z
Метод document.getElementById( )
, использовавший- ся в предыдущих примерах для добавления со- держимого из кода JavaScript, позволяет ссылать- ся на любой компонент по его значению атрибута
HTML id
. Метод getElementById( )
возвращает эле- мент, имеющий атрибут ID с указанным значе- нием.
Элементы мас- сива представля- ют только соот- ветствующие теги
HTML.
157
z
Метод document.getElementsByTagName( )
возвра- щает коллекцию всех элементов в докумен- те с указанным именем тега в виде объекта
HTMLCollection. Доступ к определенному эле- менту HTML осуществляется при использова- нии его порядкового номера.
z
Метод document.getElementsByClassName( )
возвра- щает коллекцию всех элементов в докумен- те с указанным именем класса в виде объекта
HTMLCollection. Доступ к определенному эле- менту HTML осуществляется с использованием его порядкового номера.
z
1
Создайте HTML-документ, содержащий два списка и пустой абзац.
- fruit
">
Apple
- nut
">
Almond
- fruit
">
Apricot
- fruit
">
Blackberry
- nut
">
Brazil
- fruit
">
Banana
info
">
z
2
Создайте самовызывающуюся функцию.
Объяви те и проинициализируйте пять пере- менных.
const info
= document.getElementById( '
info
' )
const item
= document.getElementById( '
country
' )
const lists
= document.getElementsByTagName( '
ol
' )
const fruits
= document.getElementsByClassName(
'
fruit
' )
let i
=
0
z
3
Добавьте оператор для описания объекта элемента и текста, содержащегося в его эле- ментах.
info
.innerHTML = item
+ '
Id:
' +
item
.innerText + '
'
collection..html
Обратите внима- ние на название двух методов. В на- звании одного ме- тода присутствует слово «Elements»
(во множе- ственном чис- ле), а в имени другого метода —
«Element» (в един- ственном числе).
158
М
е то ды и свойства об ъекта document z
4
Затем добавьте операторы для описания объ- екта HTMLCollection и текста, содержаще- гося в его элементах.
info
.innerHTML += '
' + lists
+ '
Tags:
'
for( i
=
0
; i
< lists
.length; i
++ ) {
info
.innerHTML += ( i
+
1 )
+ ' of
' + lists
.length info
.innerHTML += '
:
' + lists
[ i
].innerText + '
'
}
z
5
Наконец, добавьте операторы для описания второго объекта HTMLCollection и текста, содержащегося в его элементах.
info
.innerHTML += '
' + fruits
+ '
Class:
'
for( i
=
0;
i
< fruits
.length; i
++ ) {
info
.innerHTML += ( i
+
1 )
+ ' of
' + fruits
.length info
.innerHTML += '
:
' + fruits
[ i
].innerText + '
'
}
z
6
Сохраните HTML-документ, затем откройте его в браузере. Проанализируйте результа- ты — значения элементов, полученные раз- ными методами.
Работа с текстом
Как уже рассматривалось в предыдущих примерах, свой ства innerHTML
и innerText объекта document мо- гут использоваться для написания текста в существу- ющих элементах. Объект document также содержит
Свой ство innerText устанавливает или возвращает содер- жимое указанного узла и всех его по- томков. Свой ство innerHTML
устанав- ливает или возвра- щает содержимое
HTML (внутренний
HTML) элемента.
Чтобы увидеть раз- ницу, просто из- мените свой ство innerText на innerHTML
159
метод write( )
, который предоставляет еще один спо- соб записи текста, но он автоматически вызывает метод document.open( )
для запуска нового документа, поэтому текущий документ больше не отображается.
Полезным считается то, что метод document.
createElement( ) принимает имя тега в качестве аргу- мента и создает элемент этого типа. Затем содержи- мое может быть добавлено к новому элементу по- средством присвоения его свой ствам innerHTML
или innerText
. Новый элемент можно вставить на веб-стра- ницу в существующий, указав его в качестве аргу- мента метода document.appendChild( )
Вы также можете динамически записывать атрибуты в элементы, указав имя и значение атрибута в каче- стве двух аргументов метода setAttribute( )
z
1
Создайте HTML-документ, содержащий за- головок и упорядоченный список из трех элементов.
1 ... 6 7 8 9 10 11 12 13 14
