标签：
最近一直在研究DOM遍历以及范围的定义；
其实，JS中DOM模块定义了两个用于辅助完成顺序遍历DOM结构的类型：NodeIterator和TreeWalker。这两个类型能够基于给定的起点对DOM结构执行深度优先的遍历操作；
然，此上出自与“DOM2 级遍历和范围”的内容;不过你们懂得，IE不支持DOM遍历。所以，使用下列代码可以检测浏览器对DOM2级遍历能力的支持情况；
var sTraversals = document.implementation.hasFeature("Traversal","2.0");
var sNodeIterator = (typeof document.createNodeIterator == "function");
var sTreeWalker = (typeof document.createTreeWalker == "function");
其实，现在好多从事前端的人员对于一些前端框架如Jquery等了如指掌，但是一旦触及到原声JS，却无从下手，原因很简单，就是自己还是没有深入了解JS的运行机制，我们只是简单的像机器一样用着Jquery，因为Jquery已经帮你解决好了一些浏览器兼容性问题；
以及一些潜在的bug；而原声JS对于这些问题还是需要你一步一步去研究的；话题扯远了，继续......
任何节点都可以作为遍历的根节点；主要是看你选择谁为根节点；
一：NodeIterator 是这两个比较简单的一个，可以使用document.createNodeIterator()方法创建它的实例；参数参考：
1，root: 想要作为搜索起点的树中的节点；
2，whatToShow:表示要访问那些节点的数字代码；
3，filter：是一个NodeFilter对象，或者一个表示应该接受还是拒绝某种特定节点的函数；
4，entityReferenceExpansion:布尔值，表示是否扩展实体引用。这个参数在HTML页面中没有用，因为其中的实体引用不能扩展；
这个类型两个主要的方法是nextNode()和previousNode()；nextNode()方法用于向前前进一步，而previousNode()用于向后后退一步；
如：
<div id="my1">
<p><b>Hello</b>Andy!</p>
<ul>
<li>Num1</li>
<li>Num2</li>
<li>Num3</li>
</ul>
</div>
若要遍历div元素中所有元素：
var div =document.getElementById("my1");
var itertaor = document.createNodeIterator(div,NodeFilter.SHOW_ELEMENT,null,fasle);
var node = itertaor.nextNode();
while(node !== null){
alert(node.tagName);
node = itertaor.nextNode();
}
ps:自己可以试试打印出什么结果？
二:TreeWalker 是NodeIterator的一个更高的版本。除了nextNode()和previousNode()在内的相同的功能之外，这个类型还提供了用于在不同方向上遍历DOM结构的方法；
1，parentNode();遍历到当前节点的父节点；
2，firstChild();遍历到当前节点的第一子节点；
3，lastChild();遍历到当前节点的最后一个子节点；
4，nextSibling();遍历到当前节点的下一个同辈节点；
5，previousSibling();遍历到当前节点的上一个同辈节点；
创建TressWalker对象使用document.createTreeWalker()方法，这个方法接收的4个参数与document.createNodeIterator()方法相同；
标签：
原文地址：http://www.cnblogs.com/andyWeb/p/5502391.html
