节点遍历 element traversal

任何一个node节点都可以作为遍历的根（traversal root），然后遍历该节点本身以及后代元素，不能遍历祖先或者兄弟元素，方向可以反转

<p><b>Hello</b> world!</p>

<ul>

<li>List item 1</li>

<li>List item 2</li>

<li>List item 3</li>

</ul>

</div>

使用NodeIterator遍历：

var div = document.getElementById(“div1”);

var iterator = document.createNodeIterator(div, NodeFilter.SHOW_ELEMENT, null, false);

var node = iterator.nextNode();

while (node !== null) {

alert(node.tagName); //output the tag name

node = iterator.nextNode();

}

使用TreeWalker，更为先进的方案：

var div = document.getElementById(“div1”);

var walker = document.createTreeWalker(div, NodeFilter.SHOW_ELEMENT, null, false);

walker.firstChild(); //go to <p>

walker.nextSibling(); //go to <ul>

var node = walker.fi rstChild(); //go to fi rst <li>

while (node !== null) {

alert(node.tagName);

node = walker.nextSibling();

}

walker.currentNode = document.body; //change where to start from

巴特西