遍歷DOM樹 第一個函數: 給我根節點, 我會找到所有的子節點: forDOM(根節點) 獲取這個根節點的子節點 var children=根節點的.children 調用第二個函數 第二個函數: 給我所有的子節點, 我把每個子節點的名字顯示出來(children) for(var i=0;i<ch ...
遍歷DOM樹
第一個函數: 給我根節點, 我會找到所有的子節點: forDOM(根節點) 獲取這個根節點的子節點 var children=根節點的.children 調用第二個函數
第二個函數: 給我所有的子節點, 我把每個子節點的名字顯示出來(children) for(var i=0;i<children.length;i++){ 每個子節點 var child=children[i]; f1(child); 給我節點, 我顯示該節點的名字 child是子節點,但是如果child裡面還有子節點,此時child就是爹了 child.children&&第一個函數(child)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>遍歷DOM樹</title> </head> <body> <h1>遍歷 DOM 樹</h1> <p style="color: green;">Tip: 可以在遍歷的回調函數中任意定製需求</p> <div> <ul> <li>123</li> <li>456</li> <li>789</li> </ul> <div> <div> <span>haha</span> </div> </div> </div> <div id="demo_node"> <ul> <li>123</li> </ul> <p>hello</p> <h2>world</h2> <div> <p>dsa</p> <h3> <span>dsads</span> </h3> </div> </div> <script> //獲取頁面中的根節點--根標簽 var root=document.documentElement;//html //函數遍歷DOM樹 //根據根節點,調用fn的函數,顯示的是根節點的名字 function forDOM(root1) { //調用f1,顯示的是節點的名字 // f1(root1); //獲取根節點中所有的子節點 var children=root1.children; //調用遍歷所有子節點的函數 forChildren(children); } //給我所有的子節點,我把這個子節點中的所有的子節點顯示出來 function forChildren(children) { //遍歷所有的子節點 for(var i=0;i<children.length;i++){ //每個子節點 var child=children[i]; //顯示每個子節點的名字 f1(child); //判斷child下麵有沒有子節點,如果還有子節點,那麼就繼續的遍歷 child.children&&forDOM(child); } } //函數調用,傳入根節點 forDOM(root); function f1(node) { console.log("節點的名字:"+node.nodeName); } //節點:nodeName,nodeType,nodeValue </script> </body> </html>
