Добавляем...


Интерфейс обхода дерева DOM
DOM Traversal API (http://www.w3.org/TR/DOM-Level-2-TraversaI-Range/) - интерфейс обхода дерева DOM — является расширением DOM уровня 2, обеспечивающим удобные возможности обхода дерева документа и манипуляций с его узлами. Соответствующие спецификации указывают два объекта — Nodelterator и TreeWalker.
   Объект Nodelterator, создаваемый с помощью document .CreateNodeIterator(), может использоваться для "выравнивания" представления дерева или поддерева документа, чтобы по нему можно было перемещаться с помощью методов nextNode() и previousNode(). При создании Nodelterator можно использовать фильтр, что дает возможность выбрать определенные заданные дескрипторы.
   Подобно объекту Nodelterator, объект TreeWalker позволяет двигаться по коллекции узлов, но в данном случае древовидная структура сохраняется. Чтобы создать объект TreeWalker, используется document. createTreeWalker, а затем можно использовать методы firstChild(), lastChild(), nextSibling(), parentNode() и previousSibling(), чтобы совершить обход узлов дерева документа. С помощью nextNode() объект TreeWalker обеспечивает и возможность движения по выровненному дереву, так что в некотором смысле Nodelterator на самом деле не нужен. В качестве примера перепишем пример обхода дерева, предложенный выше, но с использованием объекта TreeWalker.

Замечание. DOM Traversal API не поддерживается в Internet Explorer 6 и более ранних версиях этого популярного браузера. Чтобы увидеть этот пример в действии, используйте Mozilla или другой браузер, поддерживающий средства обхода дерева DOM.

<!-- mozilla only -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Проверка DOM</title>
<meta http-equiv="content-type" content="text/html; " />
</head>
<body>
<h1>Заголовок примера</h1>
<hr />
<!--Это просто комментарий -->
<p>Это абзац <em>текста</em> для примера</p>
<ul>
<li><a href="http://www.yahoo.com">Yahoo!</a></li>
</ul>
<form name="testform" id="testform" action="#" method="get">
Имя узла:<input type="text" id="nodeName" name="nodeName" /><br />
Тип узла: <input type="text" id="nodeType" name="nodeType" /><br />
Значение: <input type= "text" id="nodeValue" name="nodeValue" /><br />
</form>
<script type="text/javascript">
<!--
if (document.createTreeWalker)
{
function myFilter(n) { return NodeFilter.FILTER_ACCEPT; }
var myWalker =
document.createTreeWalker(document.documentElement,NodeFilter.SHOW_ALL,myFilter,
false);
}
else
alert("Ошибка: браузер не поддерживает средства обхода DOM Traversal");
function update(currentElement)
{
window.document.testform.nodeName.value = currentElement.nodeName;
window.document.testform.nodeType.value = currentElement.nodeType;
window.document.testform.nodeValue.value = currentElement.nodeValue;
}
var currentElement = myWalker.currentNode;
update(currentElement);
//-->
</script>
<form action="#" method="get">
<input type="button" value="Родитель"
onclick="myWalker.parentNode();update(myWalker.currentNode);" />
<input type="button" value="Первый дочеринй"
onclick="myWalker.firstChild();update(myWalker.currentNode);" />
<input type="button" value="Последний дочерний"
onclick="myWalker.lastChild();update(myWalker.currentNode);" />
<input type="button" value="Следующий сестринский"
onclick="myWalker.nextSibling();update(myWalker.currentNode);" />
<input type="button" value="Предыдущий сестринский"
onclick="myWalker.previousSibling();update(myWalker.currentNode);" />
<input type="button" value="Следующийц узел"
onclick="myWalker.nextNode();update(myWalker.currentNode);" />
<input type="button" value="Возврат к корню"
onclick="myWalker.currentNode=document.documentElement;
update(currentElement);" />
</form>
</body>
</html>

И хотя поддержка средств Traversal API распространена не слишком широко, несложно написать собственную рекурсивную программу обхода деревьев. Задача итерирования весьма упрощается и на самом деле оказывается просто вариацией использования document.all[].


добавить комментарий
(без перезагрузки и регистрации)


10 случайных разделов

Что ищем на сайте ?


Примеры кода на сайте







@ 2008-2011 Amber
При использовании материалов ссылка на сайт обязательна
Яндекс.Метрика