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

来源：互联网发布：美国邮箱数据出售编辑：程序博客网时间：2024/05/22 05:04

思路：要统计标签出现的次数，首先肯定要获取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>//先获取根节点htmlvar root = document.getElementsByTagName("html")[0];//这里定义一个数组，存放对象类型，对象中有两个属性，一个是标签名name，一个是标签出现的数量numvar 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，下标为-1var 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的区别

阅读全文

0 0