遍历 DOM 树

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