遍历Dom树

最新推荐文章于 2022-01-05 14:17:08 发布

转载最新推荐文章于 2022-01-05 14:17:08 发布 · 116 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/haqiao/p/7308824.html

本文介绍了一种通过遍历DOM树来统计网页中各类型元素数量的方法，并提供了一个简单的JavaScript实现示例。

遍历Dom树，可以返回当前页面有那些元素及其数量

(function(){

    //遍历Dom树
    var doms={
        length:0
    }
    function eachDomTree(root){
        var childNodes=root.childNodes,
            len=childNodes.length;
        for(var i=0;i<len;i++){
            var item=childNodes[i];
            if(item.nodeType===1){
                var tagName=item.nodeName.toLowerCase();
                if(tagName in doms){
                    doms[tagName]++
                }else{
                    doms[tagName]=1;
                    doms['length']++
                }
            }
            if(item.childNodes.length>0){
                eachDomTree(item)
            }
        }
    }
    eachDomTree(document.body)
    console.log(doms)
//Object {length: 18, form: 1, div: 59, input: 102, script: 7…} 当前页面的元素和数量
}())