<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>