2018-01-21
498
Объектная модель документа представляется узлами (node), расположенными в виде иерархической структуры дерева. Концепция объектной модели не привязана ни к какому конкретному представлению документа (HTML, XML, SGML). Она всего лишь описывает логическую организацию документа. Ее реализация в конкретной системе представления документов ставит в соответствие узлам реальные элементы. В объектной модели документа, реализованной для HTML, в узлах могут находиться любые элементы HTML или текст, называемые узловыми элементами.
Узлы в модели DOM документа HTML могут быть следующих типов:
| Тип | Что представляет |
| Элемент HTML | |
| Текстовое содержимое тега HTML | |
| Комментарий HTML | |
| Корневой элемент иерархической структуры | |
| Фрагмент документа |
Простейший документ HTML, состоящий из пустых элементов HEAD и BODY в объектной модели DOM будет представлен деревом, показанном на рисунке. Во главе иерархии находится элемент типа 9 с именем #document, который порождает узел HTML, от которого уже и происходят узлы HEAD и BODY (все типа 1).
Текстовое содержимое элемента HTML хранится в специальном текстовом узле (тип 3) с именем #text, порождаемом узлом элемента. Причем текстовых узлов может быть несколько, если содержимое элемента представлено размеченным текстом HTML. Эти-то вложенные элементы HTML и разбивают текстовое содержимое элемента на ряд текстовых узлов.
Например, рассмотрим следующий фрагмент документа HTML:
<P>Это <B>содержимое</B> абзаца <I>документа</I> HTML</P>
В объектной модели DOM он будет представлен следующим иерархическим деревом:
Почти у любого элемента есть ID, тогда в IE к этому элементу можно обратиться следующим образом:
…
<input type=”button” id=”myp1”>
…
document.all.myp1;
а в Netscape таким образом
document.getElementByID(“myp1”);
Рассмотрим дополнительные свойства объекта document:
· activeElement – указывает имя элемента формы, который получает фокус ввода;
· linkColor – цвет активных ссылок;
· bgColor – цвет заднего фона;
· fgColor – цвет текста;
· domain – имя сервера обслуживающего этот документ;
· title – заголовок;
· referrer – URL документа из которого был вызван этот документ.
Пример:
<html><head><title>Это заголовок</title></head>
<body> <p onclick=”document.title=’Новый заголовок’”>Изменение заголовка</p>
</body></html>
Основные события:
onchange – при изменении содержимого элемента;
onclick – одинарное нажатие клавиши мыши;
ondblclick – двойное нажатие клавиши мыши;
onerror – при возникновении ошибки;
onstasrt – при начале выполнения действия объектом (например marquee);
onfinish – при завершении выполнения действия объектом;
onload – при загрузке страницы;
onhelp – при вызове помощи (например при нажатии на F1);
onmousemove – при перемещении курсора мыши над элементом;
onmouseout – при выходе курсора мыши за пределы элемента;
onmouseover – при входе курсора мыши в область элемента.
