ОбъектыHtml-страниц иWeb-браузера, их свойства и методы. События и их обработка Объектные модели

В соответствии с принципами объектного программирования браузер, получив HTML-страницу (документ), строит структуру программных объектов (HTML-объектов), содержащую всю информацию для отображения документа в окне браузера и для выполнения сценария, содержащегося в странице и осуществляющего все запрограммированные функции пользовательского интерфейса. Эта структура называется объектной моделью документа (DOM – Document Object Model). Точно так же, в браузере всегда присутствует его объектная модель, к которой также имеет доступ сценарий. Если сценарий меняет структуру объектов или их свойства, браузер немедленно отображает изменения на экране. Все объекты объектной модели называются узлами.

В соответствии с теми же принципами объектного программирования устройство объектов для сценария не играет роли (и недоступно). Каждый объект определяется своими свойствами, которые сценарий можно читать и изменять. Остальную работу с объектами сценарий осуществляет с помощью набора методов этих объектов. Действия пользователя и другие события запускают фрагменты сценария – обработчики этих событий. В программе объекты, как обычно, представлены ссылками.

Объекты страницы

Объектами (узлами) страницы являются:

• узлы тегов,

• текстовые узлы (представляют обычный текст между тегами).

Для указания в сценарии конкретных узлов тегов этим тегам в их HTML-тексте можно задать идентификатор в качестве значения атрибута id. Этот идентификатор пишется по правилам языка JavaScript для имён и его можно использовать в сценарии как ссылку на объект. Например,

<p id=parag_1>Текст абзаца</p>.

Свойствами узлов тегов являются все атрибуты этих тегов. Имена свойств, соответствующих атрибутам некоторых тегов, приведены в приложении 1. Подобных свойств у текстовых узлов нет.

Рассмотрим другие свойства узлов.

Между всеми узлами страницы имеют место строго иерархические «родственные» отношения: «отец» (parent – родитель), «сын» (child – дитя), «брат» (sibling – брат или сестра), в соответствии с порядком в HTML-тексте страницы. Эти отношения отражены в навигационных свойствах узлов:

parentNode – родительский узел,

firstChild – первый сын,

lastChild – последний сын,

previousSibling – предыдущий брат,

nextSibling – следующий брат.

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

parag_1.firstChild.

Значением этих свойств является ссылка на соответствующий узел (объект). При отсутствии требуемого объекта эти свойства выдают null. Эти свойства «только для чтения». Изменить их значения можно только с помощью соответствующих методов, изменяющих структуру объектов.

Имя тега найденного таким образом узла можно получить с помощью свойства nodeName. Для текстового узла свойство выдаст строку "#text". Если же объектом является объект браузера, то это свойство выдаст строку "#имя_объекта", например, "#document".

Свойство nodeValue для узла тега и объекта браузера выдаст null, а для текстового узла – текст, представленный этим узлом.

Парные теги имеют также ещё два полезных свойства, которые можно изменять обычным присваиванием:

innerText – внутренний текст без вложенных тегов,

innerHTML – весь внутренний HTML-текст.

События объектов страницы

Управление действиями программы осуществляется с помощью событий, происходящих из разных источников, таких как

мышь,

клавиатура,

загрузка-выгрузка в браузер страницы или другого объекта,

выделение фрагмента страницы,

заполнение и отправка формы,

печать страницы,

работа с удалёнными базами данных,

и др.

Перечислим и поясним здесь события мыши:

onclick – щелчок кнопкой мыши

ondblclick – двойной щелчок

oncontextmenu – вызов контекстного меню (щелчок правой кнопкой)

onmousedown – нажатие кнопки

onmouseup – отпускание кнопки

onmousemove – перемещение мыши без нажатия кнопки

onmouseover – появление курсора над объектом

onmouseout – уход курсора с объекта

ondrag – «перетаскивание» с нажатой кнопкой

ondragstart – начало перетаскивания

ondragend – конец перетаскивания

ondragenter – появление курсора над объектом при перетаскивании

ondragleave – уход курсора с объекта при перетаскивании

ondragover – перетаскивание над объектом

ondrop – «бросание» – отпускание кнопки при перетаскивании

onlosecapture – «потеря захвата» при перетаскивании

onresize – изменение размера объекта

onscroll – прокрутка

Все события HTML и их источники перечислены в приложении 2.

Событие происходит с каким-то тегом (над которым был курсор или который был «в фокусе»). Для обработки события в список атрибутов этого или охватывающего тега нужно включить выражение вида

событие = "текст обработчика"

Текст обработчика – это последовательность операторов на языке Java­Script (или другом языке сценариев). В один тег можно включать обработчики нескольких событий.

Обработчик события может ссылаться на объекты-теги страницы либо по их имени (некоторые теги имеют обязательный атрибут name), либо по их идентификатору id, либо, если нужно сослаться на тег, содержащий данный обработчик, посредством слова this («этот»). Например, чтобы щелчок по картинке вызвал появление вместо неё другой картинки, можно использовать следующий обработчик события onclick:

<img src="pict1.jpg" onclick="this.src='pict2.jpg'">.

Методы объектов страницы

Во многих случаях для изменения содержания парных тегов достаточно присвоить соответствующий текст свойствам innerText или innerHTML. Если же по каким-то причинам этот способ не подходит, можно воспользоваться следующими методами, которые есть почти у всех тегов

Добавление узла: appendChild, applyElement. Добавляемые узлы создаются методами объекта document (см. ниже).

Добавление/удаление события и его обработчика:

attachEvent, detachEvent.

Замена узла: replaceNode, replaceChild.

Удаление узла, атрибута:

removeNode, removeChild, removeAttribute.

Вставка/удаление строки/ячейки таблицы:

insertRow, deleteRow, insertCell, deleteCell.