Навигация по дереву документа
Для поиска узлов дерева можно применить обход дерева, а также функции поиска. Первый вариант требует наличия уже известного узла, например, document.documentElement, document.body (для доступа к тегу <body>), а также списки элементов document.forms или document.images.
Любой элемент имеет следующие ссылки на другие элементы:
element.previousSibling, element.nextSibling: указатели на предыдущий и следующий соседние элементы. Если таких нет, в данных полях содержится null
element.firstChild, element.lastChild: указатели на первого и последнего потомков. Если таких элементов нет, в данных полях содержится null
element.parentNode: указатель на родителя. Так как предок отсутствует только у корня дерева, то этот указатель равен null только для document.documentElement.
element.childNodes: массив указателей на всех потомков.
Несколько других свойств узлов: attributes – список атрибутов; ownerDocument – указатель на объект document, которому принадлежит текущий узел.
Второй способ доступа к элементам,– это использование функций: element.getElementById(), element. getElementByTagName(), element. getElementsByname(). Поскольку эти функции определены не для всего документа, а элемента, то, поиск элементов выполняется среди потомков элемента, для которого функция вызывается.
Навигацию по дереву документа можно начинать с любого узла, для которого мы знаем идентификатор, присваиваемый ему в качестве значения атрибута ID. Ссылку на такой узел можно получить с помощью метода getElementById().
Приведем пример кода:
<DOCTYPE HTML SYSTEM>
<html><head><title></title>
<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»
alert(document.getElementById("myP").childNodes[0].nodeValue);//Hello, World!
</script>
</body></head></html>
На экран вывелось nodeValue, равное null, потому что на самом деле внутри узла <p> есть еще один текстовый узел, в котором содержится искомый текст «Hello, World!». Для того чтобы получить доступ к этому значению, используется следующая строка:
document.getElementById("myP").childNodes[0].nodeValue;
Стартуя с некоторого узла, можно бродить по дереву, используя свойства узлов. Узлы-элементы и текстовые узлы имеют свойство parentNode, которое возвращает ссылку на родительский узел.
var oParent = oList.parentNode
Узлы, являющиеся потомками, входят в состав коллекции childNodes этого узла. (Узлы-атрибуты составляют отдельную коллекцию attributes) К каждому из них можно обращаться по индексу массива. Например, строка кода
var oItem1 = oList.childNodes[1]
присваивает переменнойoItem1ссылку на элемент<LI>CSS</LI> нашего списка.
Ссылка на более удаленные узлы, как по горизонтали, так и по вертикали дерева формируется путем слияния ссылок на ближайших родственников по стандартным правилам объектно-ориентированного программирования. Так, oList.childNodes[1].firstChild является ссылкой на текст "CSS" элемента <LI>CSS</LI> нашего списка.
На следующей диаграмме приведены имена всех ближайших родственников некоторого узла oNode.
Заметим, что все описанные выше свойства узлов (parentNode, firstChild, lastChild, nextSibling и previousSibling), необходимые для навигации по дереву документа, являются свойствами только для чтения. Помимо них, узлы имеют еще ряд свойств, которые мы сейчас опишем.
Чтобы проиллюстрировать иерархию узлов DOM, приведем пример:
<DOCTYPE HTML>
<html><head><title></title>
</head>
<body> <!-- пример 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>
</body></html>
Приведем пример кода внутри тега 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;
Чтобы проиллюстрировать иерархию узлов 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.