Навигация по дереву документа
Для поиска узлов дерева можно применить обход дерева, или функции поиска. Первый вариант требует наличия уже известного узла, например, document.documentElement, document.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(). Приведем пример кода:
<html><head>
<title> пример pr25</title>
</head><body>
<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></html>
На экран вывелось nodeValue, равное null, потому что на самом деле внутри узла <p> есть еще один текстовый узел, в котором содержится искомый текст «Hello, World!». Для того чтобы получить доступ к этому значению, используется следующая строка:
document.getElementById("myP").childNodes[0].nodeValue;
Стартуя с некоторого узла, можно бродить по дереву, используя свойства узлов. Узлы-элементы и текстовые узлы имеют свойство parentNode, которое возвращает ссылку на родительский узел.
Узлы, являющиеся потомками, входят в состав коллекции childNodes этого узла. (Узлы-атрибуты составляют отдельную коллекцию attributes) К каждому из них можно обращаться по индексу массива.
На следующей диаграмме приведены имена всех ближайших родственников некоторого узла oNode.
Заметим, что описанные выше свойства узлов (parentNode, firstChild, lastChild, nextSibling и previousSibling), необходимые для навигации по дереву документа, являются свойствами только для чтения. Помимо них, узлы имеют еще ряд свойств. Чтобы проиллюстрировать иерархию узлов DOM, приведем пример:
<html><head>
<title>pr26: иерархия узлов DOM</title>
</head>
<body>
<table>
<tr id="firstRow">
<td id="firstCell"></td>
<td id="currentNode" width="10">
<span id="spanNode"> text1</span>
<p id="pNode">text2</p>
<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").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>