Лекция: Навигация по дереву документа

Навигацию по дереву документа можно начинать с любого узла, для которого мы знаем идентификатор, присваиваемый ему в качестве значения атрибута ID. Ссылку на такой узел можно получить с помощью метода getElementById(). Следующая строка кода присваивает переменной oList ссылку на список:

var oList = document.getElementById(«components»)

Приведем пример кода внутри тега BODY:

<!-- пример pr28 -->

<p id=«myP»>Hello, World!</p>

<script type=«text/javascript»>

alert(document.getElementById(«myP»).innerHTML);

//выведет на экран фразу Hello World!

var str = "";

str += document.getElementById(«myP»).nodeName + '\n';

str += document.getElementById(«myP»).nodeValue + '\n';

str += document.getElementById(«myP»).nodeType + '\n';

alert(str);//выведет «P null 1»

</script>

На экран вывелось nodevalue, равное null, потому что на самом деле внутри узла <p> есть еще один текстовый узел, в котором содержится искомый текст «Hello, World!». Для того чтобы получить доступ к этому значению, используется следующая строка:

document.getElementById(«myP»).childNodes[0].nodeValue;

Стартуя с некоторого узла, можно бродить по дереву, используя свойства узлов. Так, узлы-элементы и текстовые узлы имеют свойство parentNode, которое возвращает ссылку на родительский узел. Возьмем для примера узел (объект) oList. Ссылку на родительский элемент DIV этого узла можно получить следующий образом:

var oParent = oList.parentNode

Узлы, являющиеся потомками некоторого узла, входят в состав коллекции childNodes этого узла. (Узлы-атрибуты составляют отдельную коллекцию attributes) К каждому из них можно обращаться по индексу массива. Например, строка кода

var oItem1 = oList.childNodes[1]

присваивает переменнойoItem1ссылку на элемент<LI>CSS</LI> нашего списка. Именно этот элемент представлен в DOM как узел childNodes[1]узла oList. Первый (childNodes[0]) и последний элементы коллекции имеют специальные имена: firstChild и lastChild. Эти имена являются свойствами родительского узла. Каждый из элементов коллекции имеет свойства previousSibling и nextSibling. Эти свойства хранят ссылку на ближайщих братков элемента — предыдущий и последующий элементы коллекции (возвращают null, когда братков нет). Так, элементchildNodes[1]является свойством nextSibling элемента childNodes[0] и свойствомpreviousSibling элемента childNodes[2]. Используя эти свойства, мы можем получить ссылку на узел childNodes[1]любым из следующих способов:

oList.firstChild.nextSiblingoList

.childNodes[2].previousSibling

Ссылка на более удаленные узлы как по горизонтали, так и по вертикали дерева формируется путем слияния ссылок на ближайших родственников по стандартным правилам объектно-ориентированного программирования. Так,

oList.childNodes[1].firstChild

является ссылкой на текст«CSS»элемента <LI>CSS</LI> нашего списка.

На следующей диаграмме приведены имена всех ближайших родственников некоторого узла oNode.

Заметим, что все описанные выше свойства узлов (parentNode, firstChild, lastChild, nextSibling и previousSibling), необходимые для навигации по дереву документа, являются свойствами только для чтения. Помимо них, узлы имеют еще ряд свойств, которые мы сейчас опишем.

Чтобы проиллюстрировать иерархию узлов DOM, приведем пример:

<!-- пример 29: иерархия узлов DOM-->

<table>

<tr id=«firstRow»>

<td id=«firstCell»></td>

<td id=«currentNode» width=«10»>

<span id=«spanNode»>

text</span>

<p id=«pNode»>text</p>

</td>

<td id=«lastCell»></td>

</tr>

</table>

<script type=«text/javascript»>

alert(document.getElementById(«currentNode»).parentNode.id);

//выведет на экран firstRow

alert(document.getElementById(currentNode").childNodes[0].id);

//выведет на экран spanNode

alert(document.getElementById(«currentNode»).firstChild.id);

//выведет на экран spanNode

alert(document.getElementById(«currentNode»).lastChild.id);

//выведет на экран pNode

alert(document.getElementById(«currentNode»).previousSibling.id);

//выведет на экран firstCell

alert(document.getElementById(«currentNode»).nextSibling.id);

//выведет на экран lastCell

alert(document.getElementById(«currentNode»).attributes[«width»].

value);

//выведет на экран 10

alert(document.getElementById(«currentNode»).ownerDocument.

nodeName);

//выведет на экран #document

</script>

Помимо метода getElementById(), существует несколько других, облегчающих доступ к необходимым элементам документа. Метод getElementsByName() возвращает коллекцию элементов с определенным атрибутом name, а метод getElementsByTagName() возвращает коллекцию элементов (тегов) с одинаковым именем. Оба метода принадлежат объекту document.