DOM操作-遍历HTML文档内容

基础：

  JS nodeType返回类型：http://blog.csdn.net/qyf_5445/article/details/9232907

代码：

 

<!DOCTYPE html>
<html>
    <head>
        <title>遍历文档树</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <script type="text/javascript">
            //遍历文档树
            function getDomTree(){
                alert(text(document.body));                //用提示框显示树内容
            }
            function text(elem){  
                var t="";                                //定义文字字符串
                //获取改节点的所有子节点
                var elemelem = elem.childNodes;
                //遍历所有子节点  
                for(var i=0; i<elemelem.length;i++){  
                    //当前节点
                    var e = elemelem[i];
                    //文本、注释节点不被遍历，并判断其是否为直接父节点
                    if(e.parentNode == elem && e.nodeType == 1){
                        t += e.tagName + ' ';                //把标签名添加到文本内容里
                        //循环子节点
                        if(e.childNodes.length > 0){
                            //如果子节点只有一个文本子节点，则跳过
                            if(e.childNodes.length == 1){
                                var fe = e.childNodes[0];
                                if(fe.nodeType == 3)        //是否为文本子节点
                                    continue;            //跳过
                            }
                            t += '\n\t';                    //子节点分隔符
                            t += text(e);                //递归还有子元素的子节点
                        }
                    }                   
                }  
                return t;                                //返回得到的文本  
            }  
        </script>
    </head>
    <body style="text-align:center">
        <p>
            <!-- 定义链接和按钮 -->
            <a id="myLink" href="#">链接</a>
            <br/>
            <input type="button" value="遍历文档树" onclick="getDomTree();"/>
        </p>
    </body>
</html>

 

 

 

效果：

 

 

posted @ 2016-09-20 21:17  承载梦想-韩旭明  阅读(1034)  评论(0)  编辑  收藏  举报