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>
 

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():遍歷到當前節點的下個同輩節點。

程式碼：

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);

不會返回根節點。