js统计html中标签出现次数最多的标签

思路：要统计标签出现的次数，首先肯定要获取html中的标签，然后再统计各个标签出现的次数。因为不能一下子获得所有的标签，所以只能先获得根元素，然后通过获取它的子元素来进行统计。

很久没有用原生js了，所以误以为childNodes是获得当前元素的所有子节点，后来才发现只是获取当前元素的直接子节点。。。如果能一下子获取所有节点那太简单了，直接统计就行了。可是这个只能获取直接子节点，所以还得加上递归才行。

假设有如下html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
  <style>
  </style>
</head>
<body>
  <div><div>1</div></div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</body>
</html>

现在统计上述html中出现次数最多的标签：

<script>
//先获取根节点html
var root = document.getElementsByTagName("html")[0];

//这里定义一个数组，存放对象类型，对象中有两个属性，一个是标签名name，一个是标签出现的数量num
var tags = [];

//这个函数用来统计子节点中各个标签出现的数量，参数是要统计的子节点的父节点
function build(root){

    //首先获取参数节点的子节点，不然怎么统计是不是？
    var children = root.childNodes;

    //因为children得到的是一个节点（包括文本节点和元素节点）集合，而且没法用数组的一些方法，所以这里定义一个childs数组，将children里面的文本节点顾虑掉（因为文本节点不在统计的标签内，所以上面可以选择用root.children，因为root.children获取的是元素节点不包括文本节点，当时不知道...），并存放于数组中，以使用数组中的一些方法。
    var childs = [];
    for(var j=0; j<children.length; j++){
        //过滤文本节点，将元素节点放于childs数组中
        if(typeof children[j].tagName !== 'undefined'){
            childs.push(children[j]);
        }
    }

    //遍历childs中的标签，判断tags数组中是否包含childs中的标签，如果不包含就加到tags数组后面，如果包含，就将标签对应的数量加1
    for(var i=0; i<childs.length; i++){
        var flag = 0;
        for(var j=0; j<tags.length; j++){
            if(tags[j].name === childs[i].tagName){
                tags[j].num++;
                flag = 1;
                break;
            }
        }
        if(!flag){
            var temp = {};
            temp.name = childs[i].tagName;
            temp.num = 1;
            tags.push(temp);
        }

        //递归统计每个子节点的子节点中包含的标签及数量
        build(childs[i]);
    }
}

build(root);

//假设出现最多的标签数是0，下标为-1
var max = 0;
var index = -1;
//遍历获取标签出现次数最多的一个
tags.forEach(function(v,i,tags){
    if(v.num > max){
        max = v.num;
        index = i;
    }
});
console.log("标签出现最多的是：" + tags[index].name + "\n出现的次数为：" + tags[index].num);
</script>

运行结果：
这里写图片描述

刚刚说了获取元素节点可以直接使用Element.children属性，所以可以直接像下面这样写：

<script>
var root = document.getElementsByTagName("html")[0];
var tags = [];

function build(root){
    // var children = root.childNodes;
    // var childs = [];
    // for(var j=0; j<children.length; j++){
    //  if(typeof children[j].tagName !== 'undefined'){
    //      childs.push(children[j]);
    //  }
    // }

    var childs = root.children;

    for(var i=0; i<childs.length; i++){
        var flag = 0;
        for(var j=0; j<tags.length; j++){
            if(tags[j].name === childs[i].tagName){
                tags[j].num++;
                flag = 1;
                break;
            }
        }
        if(!flag){
            var temp = {};
            temp.name = childs[i].tagName;
            temp.num = 1;
            tags.push(temp);
        }

        build(childs[i]);
    }
}

build(root);

var max = 0;
var index = -1;
tags.forEach(function(v,i,tags){
    if(v.num > max){
        max = v.num;
        index = i;
    }
});
console.log("标签出现最多的是：" + tags[index].name + "\n出现的次数为：" + tags[index].num);
</script>

运行结果一样。

参考：JavaScript中Element与Node的区别，children与childNodes的区别

js统计html中标签出现次数最多的标签

猜你喜欢