Марк Кан - Основы программирования на JavaScript

Изображение может помочь лучше понять отношения предок-потомок в этом коде.

Блок-схема документа

Необходимо также отметить атрибуты в некоторых из этих тегов. Например, тег TABLE (

) имеет 3заданых атрибута: border, cellspacingи cellpadding. При изменении DOMчасто бывает необходимо изменить эти атрибуты. Можно, например, изменить атрибут SRCтега IMG, чтобы изменить выводимое изображение. Это часто делают, например, для создания эффекта изменения изображения, на которое направлен указатель ( rollover).

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

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

37

38

39

40

41

42

43

44

45

46

47

Добавьте контакт
	Name	Email

Демонстрация

Добавьте контакт

Name Email

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

Прежде всего здесь имеется новая функция: document.createElement . Функция createElement создает задаваемый аргументом элемент. Можно видеть, что в строках сценария с 5 по 10 создается несколько элементов. В действительности создается новая строка TR , которая вставляется в таблицу в строках 37-46. В результате новая строка TR будет выглядеть следующим образом:

Другими словами, мы создали 7 элементов: 1 TR , 3 TD , 2 INPUT и 1 IMG . Тег IMG будет использоваться как изображение кнопки " Удалить ". Так как пользователь должен всегда видеть по крайней мере 1 строку ввода, то первую строку удалить невозможно. Поэтому в 12 строке сценария проверяется, что создается первая строка. Если строка не первая, то добавляется изображение.

После создания всех этих элементов остается в действительности поместить их в документ. Каждый элемент на странице имеет встроенную функцию appendChild , которую можно использовать для добавления к этому элементу потомка. Когда добавляется потомок, то он добавляется как последний элемент, поэтому если таблица уже имеет в качестве потомков 10 тегов TR и добавляется еще один, то он будет добавлен как 11-ый тег TR . Мы начинаем с получения ссылки на таблицу (строка 3). Затем мы добавляем TR к этой таблице (строка 24) и добавляем затем 3 TD (строки 25-27). Второй и третий TD содержат поле ввода, поэтому мы добавляем эти поля ввода (28-29).

Читать дальше