js统计html中标签出现次数最多的标签
2017-09-03 12:03
1326 查看
思路:要统计标签出现的次数,首先肯定要获取html中的标签,然后再统计各个标签出现的次数。因为不能一下子获得所有的标签,所以只能先获得根元素,然后通过获取它的子元素来进行统计。
很久没有用原生js了,所以误以为childNodes是获得当前元素的所有子节点,后来才发现只是获取当前元素的直接子节点。。。如果能一下子获取所有节点那太简单了,直接统计就行了。可是这个只能获取直接子节点,所以还得加上递归才行。
假设有如下html:
现在统计上述html中出现次数最多的标签:
运行结果:
![](https://img-blog.csdn.net/20170903120557913?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvRHJlYW1GSg==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
刚刚说了获取元素节点可以直接使用Element.children属性,所以可以直接像下面这样写:
运行结果一样。
参考:JavaScript中Element与Node的区别,children与childNodes的区别
很久没有用原生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; ab49 index = i; } }); console.log("标签出现最多的是:" + tags[index].name + "\n出现的次数为:" + tags[index].num); </script>
运行结果一样。
参考:JavaScript中Element与Node的区别,children与childNodes的区别
相关文章推荐
- 【CVTE】请使用原声Javascript实现一个方法,判断html中出现次数最多的标签,并统计这个次数
- sort +awk+uniq 统计文件中出现次数最多的前10个单词 (2012-12-05 15:57:12)转载▼ 标签: 转载 原文地址:sort +awk+uniq 统计文件中出现次数最多的前
- js判断字符串中出现次数最多的字符 并统计出现次数
- 【CVTE笔试题】HTML中出现次数最多的元素标签
- 用js实现统计字符串里面的出现次数最多的字符
- js分享:请写一个字符串,统计出出现次数最多的字符
- JS实现找到某字符串中出现次数最多的字符,并统计次数
- js——统计字符串中每种字符出现的次数,出现次数最多的是? 出现?次
- JS——统计字符串中出现次数最多的字符
- Trick(十二)——统计 label(序列)各个标签值出现的次数以及出现次数最多的标签
- 前端试题-js判断字符串中出现次数最多的字符及统计次数
- js常见笔试题之字母去重和统计某个出现次数最多的字母
- js统计一个字符串出现最多的字母(或者数组中出现次数最多的元素)
- 统计出现最多的字符次数的js代码
- JS练习题①:求字符串中出现次数最多的字母和出现次数
- linux命令 对日志文件的IP出现的次数进行统计 并显示次数最多的前六名
- 去除数组中重复项,并统计重复出现次数最多的元素及重复次数
- C++ 实现从0~100中随机生成50个数,统计出现的数字最大值和最小值,输出出现最多的次数及对应的数字
- 华为:统计一串字符串中出现次数最多和次多的单词(华为上机考试题)
- hpuoj【1033】出现次数最多的字母【统计元素】