遞迴案例，遍歷DOM樹
阿新 • • 發佈：2018-12-09
要點;
1.這個例子的遞迴不是一個函式的遞迴而是兩個函式組成一個整體完成遞迴，上面一個後函式獲取子節點的偽陣列，下面一個函式遍歷列印節點。
2.這個遞迴的中止條件是所有的子節點再沒有別的節點了，要看懂遞迴先找到中止條件。
程式碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <h2>遍歷 DOM 樹</h1> <p style="color: green;">Tip: 利用遞迴實現</p> <div> <ul> <li>想要學好遞迴</li> <li>記住一句話</li> <li>自己呼叫自己</li> </ul> <div> <div> <span>一定要用中止遞迴的條件</span> </div> </div> </div> <div id="demo_node"> <ul> <li>不然的話</li> </ul> <p>就會陷入</p> <h2>死迴圈</h2> <div> <p>那麼真的就是</p> <h3> <span>在寫bug了</span> </h3> </div> </div> <script type="text/javascript"> var root = document.documentElement; // 獲取根標籤html function forDom(root){ showNode(root); // 這裡輸出的是根節點 var children = root.children; // 獲取根節點的兩個子節點head和body forChildren(children); // 將這兩個的子節點的下面的所有的節點通過遞迴找出來 } // 獲取子節點偽陣列，交給下面遍歷 function forChildren(children){ for(var i=0; i<children.length; i++){ var child = children[i]; showNode(child); // 輸出子節點名字 child.children && forDom(child); // 判斷child節點是否還有子節點，如果有繼續執行遍歷節點的操作，這也是遞迴的中止條件 // 這裡用到遞迴 } } // 遍歷上面獲取到的節點組成的偽陣列，並逐個判斷是否還有子節點如果有再執行上面的函式，形成遞迴 function showNode(node){ console.log("節點：" + node.nodeName); } forDom(root); // 從根節點開始遍歷dom樹 </script> </body> </html>
效果：
