Программное создание, удаление и модификация html-элементов

DOM модель представляет HTML-документ в виде дерева, в узлах которого находятся HTML-элементы. Каждый узел дерева (кроме корневого) имеет единственный родительский узел (parentNode) и может иметь дочерние (childNodes) и "братские" (siblings) узлы, т.е. узлы, имеющие общего родителя. Модификация документа DOM-методами заключается в создании нового элемента и размещения его в определенном узле, удалении или изменении узла.

Следующий пример показывает создание списка опций в форме в ответ на выбор пользователя с использованием DOM-методов createElement (создать HTML-элемент), appendChild (добавить элемент к родительскому элементу в качестве дочернего) и removeChild (удалить дочерний элемент).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Песенка-загадка</title>

</head>

<body>

<form method="get" action="form1.htm">

Из чего же сделаны наши

<input type="radio" name="Gender" value="m" onclick="CreateList('m')" />мальчишки

<input type="radio" name="Gender" value="f" onclick="CreateList('f')" />девчонки

<div id="divList">

<!-- Здесь мы поместим ответы-->

</div>

<input type="submit" value="Отправить" />

<input type="reset" value="Сброс" />

</form>

<script type="text/javascript">

function CreateList(listType) {

var maleOptions = ["веснушки", "хлопушки", "линейки", "батарейки"];

var femaleOptions = ["цветочки", "звоночки", "тетрадки", "переглядки"];

//ищем элемент(ы) по имени

var oSelect = document.getElementsByName('Interest');

if (oSelect && oSelect[0])

//если элемент найден, удаляем его из родительского узла

oSelect[0].parentNode.removeChild(oSelect[0]);

// создаем элемент select (список опций)

oSelect = document.createElement('select');

oSelect.name = 'Interest';

oSelect.multiple = true; //разрешаем множественный выбор

var opArray = null;

// выбираем массив опций в зависимости от выбора пользователя

if (listType == 'm')

opArray = maleOptions;

else

opArray = femaleOptions;

for (var i = 0, n = opArray.length; i < n; i++) {

//создаем элемент

var op = document.createElement('option')

op.innerHTML = opArray[i];

//добавляем в новый элемент в конец списка

oSelect.appendChild(op);

}

//список еще не виден. добавляем его в родительский узел

document.getElementById('divList').appendChild(oSelect);

}

</script>

</body>

</html>

В этом же примере использовано свойство innerHTML, не являющееся частью DOM-модели, но поддерживаемое большинством браузеров. Это свойство содержит весь HTML-код (включая текст и разметку) между открывающим и закрывающим тэгами элемента (но не сами тэги). Использование innerHTML существенно упрощает процесс программирования и поэтому весьма популярно.

Вопросы

1. Для чего используется динамический HTML? Какие технологии он сочетает?

2. Что такое Объектная Модель Документа и какую роль играет она в динамическом HTML?

3. Кратко охарактеризуйте объекты window, history, navigator, document, location, screen.

4. Перечислите и охарактеризуйте наиболее часто употребляемые методы объекта window.

5. Что такое cookie? Как создавать и читать cookies?

6. С помощью какого метода можно найти в документе элемент по его id?

7. С помощью какого метода можно найти в документе все элементы определённого типа?

8. Какие методы DOM используются для создания и удаления элементов?

Что даёт свойство innerHTML?

11