浅谈DOM遍历

DOM的遍历是深度优先的DOM结构遍历，那么什么是深度优先遍历。简而言之，首先访问出发点v，对纵深方向搜索。详细请百度。
在“DOM2级遍历和范围”模块中，定义了两种用于遍历DOM结构的类型：NodeIterator和TreeWalker ，这两个属性在IE8以上支持，火狐1及更高版本、Safari1.3及更高版本，Opera7.6及更高版本,谷歌0.2及更高版本支持。

NodeIterator:

      使用NodeIterator前要使用docume.createNodeIterator()方法创建他的实例。docume.createNodeIterator()方法接受4个参数（必写）。分别是：

      root：想要作为搜索起点的树中的节点。

      whatToShow: 表示要访问那些节点的数字代码。

      filter：是一个NodeFilter对象，或者一个表示应该接受还是拒绝的某种特定节点的函数。

      entityReferenceExpansion：一个布尔值，表示是否扩展实体应用，在HTML这个参数无用，设为false.

解释filter：

      通过filter参数可以指定自定义NodeFilter对象，或者指定一个功能类似的节点过滤器的函数。每个NodeFilter对象只有一个办法，即accept-Node()； 如果应该访问给定节点，该方法返回NodeFilter.FILTER_ACCEPT，如果不应该访问给定节点，该方法返回NodeFilter.FILTER_SKIP。因为NodeFilter()是一个抽象的类型。所以不能直接创建实例，可以创建一个包含acceptNode()的方法的对象，然后将这个对象传入creatNodeItreator()中。

      nodeIterator还有两个方法nextNode()和previousNode()。nextNode()表示在当前遍历的DOM树中，在指定的节点基础上搜索下一个节点。previousNode()表示向上搜索一个节点。当遍历到最后一个节点，nextNode()会返回null。

代码演示：

HTML代码片段

<div>
	<ul/>
		<li><p></p></li>
		<li><p></p></li>
		<li><p></p></li>
		<li><p></p></li>
	</ul>
		</div>

javascript代码：

var oDiv  = document.getElementsByTagName('div')[0];
var filter = {
    acceptNode: function(node) {
	return node.tagName.toLowerCase() == 'p'?NodeFilter.FILTER_ACCEPT:NodeFilter.FILTER_SKIP;
    }
}//创建NodeFilter实例(该实例实现直线<p>元素的节点迭代器)
var oIterator = document.createNodeIterator(oDiv,NodeFilter.SHOW_ELEMENT,filter,false);
var oNode = oIterator.nextNode();
while(oNode!==null) {
    oNode = oIterator.nextNode();
    document.write(oNode.tagName+" ");
}

结果：

       

如果第三个参数为null，即

var oIterator = document.createNodeIterator(oDiv,NodeFilter.SHOW_ELEMENT,null,false);

结果
    

TreeWalker：与NodeIterator使用方法相同，所以很容易用TreeWalker替代NodeIterator

与NodeIterator不同的是，treeWalk提供了用于在不同方向上遍历DOM结果的方法。

    parentNode():遍历到当前节点的父节点。

    firstChild():遍历到当前节点的第一个子节点。

    lastChild():遍历到当前节点的最后一个子节点。

    nextSibling():遍历到当前节点的下个同辈节点。

    previousSibling():遍历到当前节点的上一个同辈节点

代码：

var oDiv  = document.getElementsByTagName('div')[0];
	var filter = {
		acceptNode: function(node) {
			return node.tagName.toLowerCase() == 'p'?NodeFilter.FILTER_ACCEPT:NodeFilter.FILTER_SKIP;
		}
	}
	var oWalk = document.createTreeWalker(oDiv,NodeFilter.SHOW_ELEMENT,filter,false);
	var oNode = oWalk.nextNode();
	while(oNode!==null) {
		oNode = oWalk.nextNode();
		document.write(oNode.tagName+" ");
}

结果

如果第三个参数为null，即：

ar oWalk = document.createTreeWalker(oDiv,NodeFilter.SHOW_ELEMENT,null,false);

结果：

不会返回根节点。