Лекция 6. Объектная модель документа
Эта лекция посвящена Объектной модели документа, или коротко DOM (Document Object Model). DOM является просто специальным термином для "всего на Web-странице". Объектная модель включает каждую таблицу, изображение, ссылку, поле формы и т.д. на Web-странице. JavaScript позволяет манипулировать с любым элементом на странице в реальном времени. Можно скрывать или полностью удалять любой элемент, добавлять элементы, копировать их, изменять такие свойства, как цвет, ширина, высота, и т.д., а при некотором воображении можно даже реализовать функции перетаскивания, анимации и почти все остальное, что можно придумать.
Прежде всего, необходимо понять, что с точки зрения браузера страница HTML является точно тем же, что и документ XML. Если читатель имеет опыт работы с XML, то сможет понять обработку DOM достаточно легко. Но в любом случае это в действительности не сложно. Существует прекрасный справочник по адресу (http://www.devguru.com/technologies/xml_dom/index.asp), который подробно описывает каждый метод обработки DOM, но к концу этой лекции читатель в основном поймет, как это работает.
Те, кто знает, что такое документ XML, могут пропустить этот раздел. Остальным необходимо его прочитать.
Будем надеяться, что читатель в какой-то степени знаком с HTML. Это то, из чего состоит (почти) каждая Web-страница. Каждое изображение, ссылка, таблица, поле формы и т.д. имеют свой собственный тег. Ниже приведен пример простой страницы HTML:
<HTML>
<BODY>
<table border="0" cellspacing="2" cellpadding="5">
<tr>
<td colspan="2"><img src="Greetings.jpg" id="greetingImg" /></td>
</tr>
<tr>
<td>
Добро пожаловать на мою страницу HTML!
<br />
<a href="somelink.html" id="myLink" >Щелкните здесь!</a>
</td>
<td><img src="hello.jpg" id="helloImg" /></td>
</tr>
</table>
</BODY>
</HTML>
Это просто обычная страница HTML. Возможно, вы не знаете о том, что это также пример документа XML. Здесь нас интересует то, что каждый элемент является потомком и/или предком другого элемента. Первое изображение находится внутри тега TD, который находится внутри тегов TR, TABLE, BODY и HTML. Двигаясь в другом направлении, можно видеть, что тег BODY имеет одного "потомка" - тег TABLE. Этот тег TABLE имеет в качестве потомков два тега TR и т.д. По сути именно так мы перемещаемся в документе XML или HTML DOM - двигаясь от потомка к предку или от предка к потомку.
Изображение может помочь лучше понять отношения предок-потомок в этом коде.
Блок-схема документа
Необходимо также отметить атрибуты в некоторых из этих тегов. Например, тег TABLE (<table border="0" cellspacing="2" cellpadding="5">) имеет 3 заданых атрибута: border, cellspacing и cellpadding. При изменении DOM часто бывает необходимо изменить эти атрибуты. Можно, например, изменить атрибут SRC тега IMG, чтобы изменить выводимое изображение. Это часто делают, например, для создания эффекта изменения изображения, на которое направлен указатель (rollover).
Теперь, имея общее представление о компоновке страницы, можно начинать ее модификацию. Начнем с создания простого эффекта изменения изображения:
<img src="button_off.gif"
onmouseover="this.src='button_over.gif';"
onmousedown="this.src='button_down.gif';"
onmouseout ="this.src='button_off.gif';"
onmouseup ="this.src='button_over.gif';">
В этом коде присутствуют 4 события изображения: onmouseover, onmousedown, onmouseout и onmouseup. Каждое из этих событий имеет присоединенный простой фрагмент кода JavaScript, который изменяет атрибут src изображения. Создавая три разных изображения, можно легко и быстро создать изображение с тремя сменяющими друг друга состояниями.
Одной из задач, которая становится все более распространенной в современных приложениях JavaScript, является возможность добавления или удаления элементов страницы. Предположим, что имеется форма, которая позволяет послать кому-нибудь ссылку. Обычно используется одно поле ввода для адреса e-mail и второе - для имени получателя. Если требуется послать ссылку нескольким адресатам, то либо придется посылать форму несколько раз, либо можно было бы разместить на странице более одного набора полей имя/e-mail. Но в этом случае мы все еще ограничены заданным числом контактов. Если имеется пространство для 5 контактов и необходимо послать ссылку 20 людям, то форму придется заполнять 4 раза.
JavaScript позволяет обойти эту проблему, делая возможным динамическое дополнение и удаление содержимого страницы:
1 var inputs = 0;
2 function addContact(){
3 var table = document.getElementById('contacts');
4
5 var tr = document.createElement('TR');
6 var td1 = document.createElement('TD');
7 var td2 = document.createElement('TD');
8 var td3 = document.createElement('TD');
9 var inp1 = document.createElement('INPUT');
10 var inp2 = document.createElement('INPUT');
11
12 if(inputs>0){
13 var img = document.createElement('IMG');
14 img.setAttribute('src', 'delete.gif');
15 img.onclick = function(){
16 removeContact(tr);
17 }
18 td1.appendChild(img);
19 }
20
21 inp1.setAttribute("Name", "Name" +inputs);
22 inp2.setAttribute("Email", "Email"+inputs);
23
24 table.appendChild(tr);
25 tr.appendChild(td1);
26 tr.appendChild(td2);
27 tr.appendChild(td3);
28 td2.appendChild(inp1);
29 td3.appendChild(inp2);
30
31 inputs++;
32 }
33 function removeContact(tr){
34 tr.parentNode.removeChild(tr);
35 }
36 <table>
37 <tbody id="contacts">
38 <tr>
39 <td colspan="3"><a href="javascript:addContact();">Добавьте контакт</a></td>
40 </tr>
41 <tr>
42 <td></td>
43 <td>Name </td>
44 <td>Email</td>
45 </tr>
46 </tbody>
47 </table>
Демонстрация
Добавьте контакт
Name Email
Возможно вам не приходилось ранее использовать тег TBODY. Многие браузеры автоматически добавляют этот тег в DOM, не сообщая об этом. Если необходимо изменить содержимое таблицы, то в действительности необходимо изменить содержимое TBODY. Во избежание возможных недоразумений мы просто добавили тег TBODY, чтобы каждый мог бы его видеть. Все это может показаться достаточно сложным, но здесь очень мало нового материала.