這次帶給大家怎樣用JS實作DOM樹遍歷,JS實作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();//先入先出,借助于数据结构:队列 } };
#深度優先遍歷
先遍歷根節點,然後沿著一條路徑遍歷到最深的一層,最後在逐層返回。
借助於堆疊,實作多叉 DOM樹 的深度優先遍歷。
Tree.prototype.DFSearch = function(node,callback){ var stack=[]; while(node!=null){ callback(node); if(node.children.length!=0){ for (var i=node.children.length-1;i>=0;i--){//按照相反的子节点顺序压入栈 stack.push(node.children[i]);//将该节点的所有子节点压入栈 } } node = stack.pop();//弹出栈的子节点顺序就是原来的正确顺序(因为栈是先入后出的) } };
二元DOM 樹的前序、中序、後序遍歷,是深度優先遍歷的特例
因此,參考深度優先遍歷,借助棧,可以以非遞歸的方式,實現二元DOM 樹的 前序、中序和後序遍歷
非遞歸實現二元DOM 樹的前序遍歷
Tree.prototype.preOrder = function(node,callback) { var stack=[]; while(node!== null || stack.length!=0){ while(node!==null){ stack.push(node); callback.push(node); node=node.firstElementChild; } node=stack.pop(); node=node.lastElementChild; } };
非遞歸實作二元DOM 樹的中序遍歷
Tree.prototype.inOrder = function(node,callback) { var stack=[]; while(node!== null || stack.length!=0){ while(node!==null){ stack.push(node); node=node.firstElementChild; } node=stack.pop(); callback(node); node=node.lastElementChild; } };
非遞迴實作二元DOM 樹的後序遍歷
#①每個節點,都壓入堆疊兩次;
② 在循環體中,每次彈出一個節點賦給node
③ 如果node仍然等於堆疊的頭結點,表示node的孩子們還沒有被操作過,應該把它的孩子們加入堆疊中
④ 否則,說明是第二次彈出該節點,訪問node。
也就是說,第一次彈出,將node的孩子壓入堆疊中,第二次彈出,訪問node
TreeWalker.prototype.postOrder = function(node,callback) {//非递归实现 var stack=[]; stack.push(node); stack.push(node); while(stack.length != 0) { node = stack.pop(); if(stack.length != 0 && node==stack[stack.length-1]) { if(node.lastElementChild) stack.push(node.lastElementChild), stack.push(node.lastElementChild); if(node.firstElementChild) stack.push(node.firstElementChild), stack.push(node.firstElementChild); } else callback(node); } }
相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
推薦閱讀:
以上是怎樣用JS實作DOM樹遍歷的詳細內容。更多資訊請關注PHP中文網其他相關文章!