Книга: HTML: Популярный самоучитель

Объект document

Объект document

Для программиста на JavaScript HTML?документ представляется в виде объекта document. Этот глобальный объект существует в единичном экземпляре. О создании объекта document заботится интерпретатор.

Свойства и методы объекта document

Итак, объект document предоставляет ряд свойств и методов, позволяющих осуществлять практически любые манипуляции с HTML?документом. Основные свойства объекта document приведены в табл. 13.2.

Таблица 13.2. Свойства объекта document


Свойства, отвечающие за цветовое оформление, хранят целочисленные значения. Другие свойства, кроме возвращающих коллекции, хранят строки. Особо следует рассмотреть свойства, которые возвращают коллекции: all, anchors, forms, frames, images и links. В этих коллекциях находятся объекты, описывающие соответствующие элементы HTML?документа.

Коллекции – это тоже объекты, во многом похожие на массивы. Однако коллекции предоставляют доступ к своим элементам c помощью метода item(). Причем доступ может осуществляться как по номеру элемента в коллекции, так и по его имени (задается атрибутом id или name элемента). Нумерация элементов в коллекциях начинается с нуля. Кроме того, для коллекций предусмотрено свойство length, хранящее количество элементов в коллекции.

В качестве примера рассмотрим, как получить доступ к элементам следующего HTML?документа (пример 13.3).

Пример 13.3. HTML-документ, к элементам которого нужно получить доступ

<HTML>

<HEAD>

<TITLE>Заголовок документа</TITLE>

</HEAD>

<BODY>

<H1 id = "main_part">Главный заголовок документа</H1>

<P id = "par1">Текст документа...

</BODY>

</HTML>

Если осуществлять доступ к элементам документа при помощи коллекции all с использованием номеров, то доступ ко всем элементам документа будет выглядеть следующим образом:

var elements = []; //Массив, в который скопируем ссылки на объекты страницы

var i;

for (i=0; i<document.all.length; i++)

elements[i] = document.all(i);

В примере 13.3 в коллекции all содержится шесть элементов, поэтому массив elements после выполнения приведенного фрагмента программы должен содержать шесть элементов. Обратите внимание, как осуществляется доступ к элементам коллекции all: имя метода item() можно опускать.

Если бы доступ к элементам коллекции осуществлялся по имени HTML?элементов, то можно было бы получить объекты, описывающие заголовок и абзац, следующим образом:

var h = document.all(«main_part»);

var p = document.all("par1");

Возможно также прямое обращение к поименованным элементам документа. При использовании этого способа предыдущий фрагмент программы будет выглядеть следующим образом:

var h = main_part;

var p = par1;

Кроме достаточно богатого набора свойств, можно пользоваться методом write() объекта document для добавления к HTML?документу любого текста прямо из сценария. Метод write() принимает строку, в которой может содержаться любое HTML?форматирование, например:

document.write('<H1 id = «part2»>Текст, напечатанный сценарием</H1>')

При выполнении этого фрагмента программы не только появляется текст заголовка в окне браузера, но и создается объект с именем part2, к которому можно получить доступ с использованием той же коллекции all.

Использование методов open(URI_документа) и close() объекта document позволяет открывать новые HTML?документы и закрывать окно браузера с текущим документом, например:

open(«13.1.html») //Открываем пример 13.1 в новом окне

close(); //Пытаемся закрыть текущий документ

Управление элементами документа

Итак, выше рассмотрено, как можно получить доступ к объектам, описывающим HTML?элементы документа. Теперь же рассмотрим, какие общие действия можно производить с полученными объектами.

Свойства, которые доступны для большинства элементов документа, приведены в табл. 13.3.

Таблица 13.3. Основные свойства элементов документа



В табл. 13.4 приводятся основные методы, которые можно использовать для манипулирования большинством элементов документа.

Таблица 13.4. Основные методы элементов документа


С использованием приведенных в таблицах свойств и методов можно осуществлять практически любые манипуляции с документом, показываемым в окне браузера. Сейчас дополнительно будут рассмотрены некоторые особенности доступа к элементам таблиц: доступ к строкам и ячейкам.

Объекты, описывающие таблицы, поддерживают внутреннюю коллекцию rows, с помощью которой организовывается доступ к отдельным строкам таблицы. Эти объекты поддерживают также методы insertRow(номер) и deleteRow(номер), которые принимают в качестве параметра номер строки и позволяют вставить или удалить строку таблицы. Если метод insertRow() вызвать без параметра, то строка будет добавлена в конец таблицы. При успешном добавлении строки метод insertRow возвращает ссылку на объект, описывающий созданную строку.

Каждым элементом коллекции rows является объект, одним из свойств которого является коллекция cells, содержащая объекты, управляющие ячейками таблицы. Каждый элемент коллекции cells позволяет оперировать конкретными ячейками таблицы. Добавление ячеек в строку таблицы можно осуществлять при помощи метода insertCell(номер) объектов коллекции rows. Удалять же ячейки можно, используя метод deleteCell(номер) объектов той же коллекции.

Наконец, как завершающий этап знакомства с объектом document создадим несколько страниц, использующих его возможности.

Страница следующего примера будет представлять собой своеобразный каталог изображений. Изображения вместе с текстом, описывающим их, будут помещены в таблице. При этом помещение и удаление данных должно выполняться интерактивно (то есть этим управляет пользователь). Внешний вид страницы примера приведен на рис. 13.1.


Рис. 13.1. Изменяемая страница (каталог изображений)

При реализации примера код сценария и HTML?код страницы расположены в отдельных файлах. Файл документа может иметь произвольное имя. Он выглядит следующим образом (пример 13.4).

Пример 13.4. Файл HTML-документа

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN»>

<HTML>

<HEAD>

<TITLE>Пример модифицирования таблицы сценарием</TITLE>

<SCRIPT type = "text/javascript" src = "script_13_4.js"></SCRIPT>

</HEAD>

<BODY>

<FIELDSET>

<LEGEND>Новое изображение</LEGEND>

Код: <INPUT name = "txtCode" maxlength = "4" size = "5">

Описание: <INPUT name = "txtName" maxlength = "500">

<BR>Путь к изображению: <INPUT type = "file" name = "txtFile">

<BR><INPUT type = "button" value = "Добавить рисунок"

onClick = "add_image(txtCode.value, txtName.value, txtFile.value)">

<INPUT type = "button" value = "Удалить рисунок..."

onClick = "delete_image()">

</FIELDSET>

<P>

<TABLE width = "100%" border>

<!–Определения столбцов таблицы–>

<COL width = "60">

<COL>

<COL width = "130">

<THEAD>

<TR><TH>Код<TH>Описание<TH>Просмотр

</THEAD>

<TBODY id = "mytable">

<!–Сюда сценарий вставляет записи–>

</TBODY>

</TABLE>

</BODY>

</HTML>

В приведенном примере обратите внимание на элемент TBODY таблицы. Присвоив ему имя, вы можете работать с телом таблицы как с самостоятельной таблицей. Это же справедливо для THEAD и TFOOT. Обратите также внимание на получение значений, введенных в текстовые поля: в большинстве случаев можно пользоваться не методами getAttribute() и setAttribute(), а свойствами, которые имеют такие же названия, как и соответствующие атрибуты.

Теперь очередь файла с кодом сценария. В примере он имеет имя script_13_4.js (JS – стандартное расширение для файлов со сценариями на JavaScript) (пример 13.5).

Пример 13.5. Файл script_13_4.js

//Функция принимает код, название, путь изображения и добавляет

//запись в таблицу function add_image(code, imagename, path){

if (valid_data(code, imagename, path)){

//Формирование строки таблицы (в части TBODY)

var row = mytable.insertRow();

//Ячейка с кодом рисунка row.insertCell().innerHTML = "<B>" + code + "</B>";

//Ячейка с названием row.insertCell().innerHTML = imagename;

//Ячейка с изображением row.insertCell().innerHTML = '<IMG width = "130" src = "'+ path +'">';

}

}

//Функция проверяет правильность введеных данных function valid_data(code, imagename, path){

//Проверка, введены ли все значения if (code == "" || imagename == "" || path == ""){

alert("Введите значения во все поля");

return false;

}

else{

//Проверим, чтобы код изображения не дублировался var i;

for (i=0; i<mytable.rows.length; i++){

if (mytable.rows(i).cells(0).innerText == code){

alert("Изображение с кодом "+ code +" уже присутствует в таблице");

return false;

}

}

}

return true;

}

//Функция удаления записи из таблицы (код изображения

//вводит пользователь)

function delete_image(){

var code = prompt("Введите код удаляемого изображения", "");

if (code != null){

//Находим и удаляем запись var i;

for (i=0; i<mytable.rows.length; i++){

if (mytable.rows(i).cells(0).innerText == code){

mytable.deleteRow(i);

return true;

}

}

alert("Изображение с кодом " + code + " не найдено.");

}

}

Как видно, в файле script_13_4.js реализованы три функции. Первая функция add_image() используется для добавления записей в таблицу. Перед добавлением каждой новой записи она проверяет (с помощью функции valid_data()), чтобы были введены все данные (код, описание и путь изображения), а также, чтобы код нового изображения не дублировался кодом одного из изображений, ранее добавленных в таблицу. Третья функция delete_image() используется для удаления записи из таблицы.

Из примера 13.5 можно увидеть применение коллекций rows и cells таблицы на практике.

Помещаем свое меню на страницу

Рассмотрим еще один довольно любопытный пример, позволяющий разнообразить оформление страницы. Используя таблицы, CSS и простые сценарии, создадим свое красочное меню. В пункты этого меню можно вставлять маленькие изображения. Пункты будут подсвечиваться при наведении на них указателя мыши. Внешний вид меню представлен на рис. 13.2.


Рис. 13.2. Внешний вид меню

Ниже приводится текст HTML?документа с созданным меню (пример 13.6).

Пример 13.6. Документ с меню

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Frameset//EN»>

<HTML>

<HEAD>

<TITLE>Страница с меню</TITLE>

<STYLE type = "text/css">

.item {background-color: rgb(170, 170, 170)}

.selected {background-color: magenta}

.menu {border-style: ridge}

</STYLE>

<SCRIPT src = "menu.js" type = "text/javascript"></SCRIPT>

</HEAD>

<BODY>

<TABLE id = "menu1" class = "menu">

<!–Первый пункт меню–>

<TR id = "item1" class = "item" onClick = "item1_click()"

onMouseOver = "item1.className = 'selected'"

onMouseOut = "item1.className = 'item'">

<TD><IMG src = "icons/2.jpg"><TD>Первый пункт меню

<!–Второй пункт меню–>

<TR id = "item2" class = "item" onClick = "item2_click()"

onMouseOver = "item2.className = 'selected'"

onMouseOut = "item2.className = 'item'">

<TD><IMG src = "icons/2.jpg"><TD>Второй пункт меню

<!–Третий пункт меню–>

<TR id = "item3" class = "item" onClick = "item3_click()"

onMouseOver = "item3.className = 'selected'"

onMouseOut = "item3.className = 'item'">

<TD><IMG src = "icons/3.jpg"><TD>Третий пункт меню

<!–Четвертый пункт меню–>

<TR id = "item4" class = "item" onClick = "item4_click()"

onMouseOver = "item4.className = 'selected'"

onMouseOut = "item4.className = 'item'">

<TD><IMG src = "icons/4.jpg"><TD>Четвертый пункт меню

<!–Пятый пункт меню–>

<TR id = "item5" class = "item" onClick = "item5_click()"

onMouseOver = "item5.className = 'selected'"

onMouseOut = "item5.className = 'item'">

<TD><IMG src = "icons/5.jpg"><TD>Пятый пункт меню

</TABLE>

</BODY>

</HTML>

Из приведенного текста можно увидеть, каким образом используется таблица: пунктами меню являются строки таблицы. Чтобы строки таблицы подсвечивались при наведении указателя мыши, их стилевой класс динамически изменяется при обработке событий onMouseOver, onMouseOut. Изменив определения стилевых классов item, selected, menu, можно легко добиться нужного вида меню.

При выборе каждого из пунктов меню вызывается соответствующая функция?обработчик (см. значения атрибутов onClick для элементов TR). Все функции?обработчики собраны в файле menu.js, текст которого приводится ниже (пример 13.7).

Пример 13.7. Содержимое файла menu.js

/*

В этом файле содержатся функции-обработчики для каждого пункта меню

*/

function item1_click(){

alert("Вы выбрали первый пункт меню");

//Другие действия...

}

function item2_click(){

alert("Вы выбрали второй пункт меню");

//Другие действия...

}

function item3_click(){

alert("Вы выбрали третий пункт меню");

//Другие действия...

}

function item4_click(){

alert("Вы выбрали четвертый пункт меню");

//Другие действия...

}

function item5_click(){

alert("Вы выбрали пятый пункт меню");

//Другие действия...

}

В каждую их приведенных выше функций помещен только код, сообщающий о работоспособности отдельного пункта меню.

Оглавление книги


Генерация: 0.557. Запросов К БД/Cache: 2 / 0
поделиться
Вверх Вниз