本文實例講述了JavaScript實現的DOM樹遍歷方法。分享給大家供大家參考，具體如下：

二叉 DOM 樹的遍歷

function Tree() {   var Node = function(key){      this.key = key;      this.left = null;      this.right = null;   }   root =null;}

前序遍歷

首先訪問根結點，然后遍歷左子樹，最后遍歷右子樹

Tree.prototype.preOrderTraverse = function(callback){  preOrder(root, callback);}var preOrder = function(node,callback){  if(node !== null){    callback(node.key);    preOrder(node.left, callback);    preOrder(node.right, callback);  }}

修改為DOM二叉樹：

var preOrder = function(node,callback) {  callback(node);  if(node.firstElementChild) {//先判斷子元素節點是否存在     this.preOrder(node.firstElementChild,callback);  }  if(node.lastElementChild) {    this.preOrder(node.lastElementChild,callback);  }};

中序遍歷

首先遍歷左子樹，然后訪問根結點，最后遍歷右子樹。

Tree.prototype.inOrderTraverse = function(callback){  inOrder(root, callback);}var inOrder = function(node,callback){  if(node !== null){    inOrder(node.left,callback);    callback(node.key);    inOrder(node.right, calback);  }}

修改為DOM二叉樹：

var inOrder = function(node,callback){  if(node.firstElementChild) {  this.inOrder(node.firstElementChild);  }  callback(node);  if(node.lastElementChild) {  this.inOrder(node.lastElementChild);  }}

后序遍歷

首先遍歷左子樹，然后遍歷右子樹，最后訪問根結點。

Tree.prototype.postOrderTraverse = function(callback){  postOrder(root, callback);}var postOrder = function(node,callback){  if(node !== null){    postOrder(node.left,callback);    postOrder(node.right, calback);    callback(node.key);  }}

修改為DOM二叉樹：

var postOrder = function(node,callback){  if(node.firstElementChild) {  this.postOrder(node.firstElementChild);  }  if(node.lastElementChild) {  this.postOrder(node.lastElementChild);  }  callback(node);}

多叉 DOM 樹的遍歷

廣度優先遍歷

首先遍歷根節點，然后訪問第一層節點，第二層節點，....,直到訪問到最后一層。

借助于隊列，用非遞歸的方式對多叉樹進行遍歷

Tree.prototype.BFSearch = function(node,callback){  var queue=[];  while(node!=null){      callback(node);    if(node.children.length!=0){    for (var i=0;i<node.children.length;i++){      queue.push(node.children[i]);//借助于隊列,暫存當前節點的所有子節點    }    }      node=queue.shift();//先入先出，借助于數據結構：隊列  }};

深度優先遍歷

首先遍歷根節點，然后沿著一條路徑遍歷到最深的一層，最后在逐層返回。