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

Навигацию по дереву документа можно начинать с любого узла, для которого мы знаем идентификатор, присваиваемый ему в качестве значения атрибута ID. Ссылку на такой узел можно получить с помощью метода getElementById()объекта document. Следующая строка кода присваивает переменной 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.