Перемещение по документу
Методы, позволяющие последовательно получать объекты, находящиеся в любых узлах документа, основаны на использовании относительных "координат". Имеется некоторый исходный узел, объект которого может быть получен, например, по его идентификатору: document.getElementById("идентификатор")
Узлы обладают свойствами parentNode — родительский узел, childNodes — массив дочерних узлов (а также previousSibling и nextSibling — предыдущий и следующий узлы-братья). Поэтому находясь в некотором узле можно получить узлы (объекты), расположенные выше, ниже или на том же уровне дерева.
Узел, соответствующий корневому элементу xml-документа можно получить с помощью свойства document.documentElement, являющийся единственным дочерним элементов узла document.
Имя элемента и идентификатор элемента хранятся, соответственно, в свойствах tagName и id.
Содержание в текстовых узлах хранится в свойстве data.
ЗАДАНИЕ 1 (Использование отношений между узлами)
1. Использовать как основу для выполнения задания следующий пример документа:
<HTML id="docHTML">
<HEAD id="docHead">
<TITLE id="docTitle">Мой документ</TITLE>
</HEAD>
<BODY ID="docBody" BGCOLOR="red">
<DIV ID="docDiv"></DIV>
</BODY>
</HTML>
2. Добавить в заголовочную часть документа элемент <script> с идентификатором "docScript", в котором определена функция checkDOM без аргументов (ее тело строится последовательно в следующих пунктах задания).
Функция checkDOM предназначена для экспериментов с DOM и будет применяться для получения доступа к различным элементам, именам их тегов (tagName), идентификаторов (id), количества дочерних элементов (свойство length) и т.п.
Эта функция должна автоматически запускаться сразу после загрузки документа (использовать обработчик события onload).
3. Тело функции содержит код для выполнения следующих действий.
а) Получить объект-элемент с идентификатором "docDiv", который будет использоваться как базовый для доступа к другим элементам.
б) Используя полученный в предыдущем пункте объект и свойство parentNode элементов DOM, пошагово подняться вверх по дереву до его корня, получая имена и идентификаторы всех попутно встречающихся тегов (т.е. включая HTML). Вывести собранную информацию.
Результаты должны выводиться приблизительно в следующем виде:
в) Вывести количество дочерних элементов у элемента HTML и их теги.
г) Вывести количество дочерних элементов у элемента HEAD, их теги и идентификаторы.
Создание и добавление элементов в документ
В спецификации методы для создания различных компонентов xml-документов, определены в интерфейсе документа Document, который поддерживает объект document.
1. Создание элементов.
Для создания элементов применяется метод createElement:
document.createElement("имя тега").
возвращающий созданный объект.
Например, элемент-гиперссылка формируется следующим образом:
var link = document.createElement('a');
2. Добавление атрибутов.
Объект, построенный с помощью createElement, еще не является частью документа. Это "сырой" объект, который нужно дополнить свойствами (атрибутами), и, кроме того, поместить в документ.
Атрибуты добавляются элементам с помощью метода setAttribute, определенного в интерфейсе Element (атрибуты добавляются к элементам, а не в документ):
объект_элемента.setAttribute(attributeName [,value]).
где attributeName — имя атрибута, а value — значение атрибута, если его необходимо задать. Так как атрибуты добавляются к элементам, то метод вызывается для объекта конкретного элемента, а не для document.
Например, созданный ранее объект link нуждается в атрибуте href:
link.setAttribute("href", "lab_DOM.htm");
В результате выполнения двух приведенных операций будет подготовлен объект, представляющий гиперссылку <A HREF="lab_DOM.htm"></A>
Одному элементу можно по очереди назначить любое количество атрибутов.
3. Создание текстового узла.
Текстовый узел формируется из обычного текста, включающего пробельные символы, но не содержащего разметки. Для создания текстового узла используется метод createTextNode()объекта document.
Например, создадим узел с текстом "Это новый узел":
var txtNode = document.createTextNode("Это новый узел");
4. Добавление элементов в документ
Методы для добавления и удаления элементов определены в интерфейсе узлов Node, который поддерживают все объекты html-элементов.
Для вставки нового элемента в документ нужно указать место вставки. Точкой, определяющей место вставки нового элемента, должен являться какой-то существующий элемент документа, который станет для добавляемого элемента родительским.
а) Добавления нового элемента в конец коллекции дочерних элементов.
Для добавления нового элемента в конец коллекции дочерних элементов текущего элемента используется метод appendChild. Например, добавим элемент в дочерние узлы элемента с id="myDiv":
elem=document.getElementById("myDiv");
elem.appendChild(link); //добавили элемент в конец дочерних
б) Добавления нового элемента в перед заданным дочерним элементом.
Для добавления элемента в конкретное место коллекции дочерних элементов нужно указать дочерний элемент, перед которым будет выполнена вставка. Для этого применяется метод insertBefore, вызываемый для родительского элемента:
родительский_узел.insertBefore(что_добавить, перед_каким_добавить)
Например,
elem=document.getElementById("myDiv");
elem.insertBefore(txtNode,elem.firstChild);
означает добавление нового узла txtNode перед первым дочерним узлом elem, т.е. в самое начало (firstChild) тела элемента c идентификатором myDiv.
ЗАДАНИЕ 2 (Добавление элементов в документ)
1. Написать вспомогательные функции, облегчающие создание документа с помощью DOM API:
getObj(ID) — возвращает объект по заданному строковому ID,
element(name) — создает и возвращает новый элемент с тегом name,
tnode(txt) — создает и возвращает новый текстовый узел с текстом txt.
2. Создать таблицу, состоящую из одной строки и трех ячеек, содержащих тексты "Ячейка 1", "Ячейка 2" и "Ячейка 3".
Определить для тега tr атрибут id.
3. Написать функцию insertCell, которая добавляет в строку таблицы новую ячейку с текстами типа "Новая ячейка 1".
Для учета количества добавленных ячеек необходимо поддерживать счетчик.
Функция имеет один аргумент, который определяет, куда нужно добавить новую ячейку — в начало или конец строки таблицы.
Последовательность действий в функции следующая.
а) Сначала создается новый элемент td и текстовый узел с содержанием новой ячейки, который далее назначается дочерним элементом созданного ранее элемента td.
б) Далее отыскивается элемент tr таблицы. Он используется как базовый при добавлении ячеек.
в) Если ячейка добавляется в конец строки, то используется метод appendChild.
Если ячейка добавляется в начало строки, то для объекта строки вызывается метод getElementsByTagName и ищутся все его дочерние элементы td. Из полученного массива выбирается первый элемент и добавление новой ячейки выполняется с помощью метода insertBefore узла tr.
4. В документ добавить две ссылки: "Добавить в начало" и "Добавить в конец", с помощью которых выполняется добавление ячеек.