本文要介紹JavaScript關於DOM節點的深度優先和廣度優先遍歷,有一定的參考價值,有需要的朋友可以參考一下,希望對你們有幫助。
HTML的樹狀結構如上
#對於樹的深度優先遍歷,執行結果應該如下:
var arr=[]; //深度优先 function traversalDFSDOM (rootDom) { if(!rootDom)return; if(rootDom.children.length==0){ arr.push(rootDom)//没有孩子节点,表示是个叶子节点,将节点push到数组中 return; } arr.push(rootDom)//非孩子节点,在每次遍历它的孩子节点之前先把它push到数组中 for(var i=0;i<rootdom.children.length><p>結果如下</p> <p style="text-align: center;"><img src="https://img-blog.csdn.net/20180405023706585?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xYWTIyNA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70" alt=""></p>##( script標籤寫在body外面,但執行的時候瀏覽器會把它放到body中,變成最後一個元素)<p><br></p>採用非遞歸的方式<h5><pre class="brush:php;toolbar:false"> //深度优先非递归 function traversalDFSDOM(rootDom) { if(!rootDom)return; var stack=[] var node = rootDom; while(node!=null){ arr.push(node); if(node.children.length>=0){ for(let i=node.children.length-1;i>=0;i--) stack.unshift(node.children[i]); } node = stack.shift() } } traversalDFSDOM(bodyDom)非遞歸主要採取模擬隊列的方法過程: 以此類推,需要注意的是i的循環需要從node.children.length-1開始到0廣度優先遍歷對於DOM樹的廣度優先遍歷的結果應該如下 採用遞歸方式
var stack=[bodyDom];//bodyDom是遍历的根节点 function traversalBFSDOM (count) { count = count || 0; if (stack[count]) { var children = stack[count].children; for (let i = 0; i <pre class="brush:php;toolbar:false">traversalBFSDOM(0)
function traversalBFSDOM (rootDom) { if(!rootDom)return; arr.push(rootDom) var queue = [rootDom]; while(queue.length){ var node = queue.shift(); if(!node.children.length){ continue; } for(var i=0;i<node.children.length></node.children.length>
JavaScript影片教學!
相關推薦:以上是JavaScript關於DOM節點的深度優先和廣度優先遍歷的詳細內容。更多資訊請關注PHP中文網其他相關文章!