统计页面使用标签种类数

Posted linweinb

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了统计页面使用标签种类数相关的知识,希望对你有一定的参考价值。

之前在知乎上看到贺老(贺师俊)在一个问题下的回答里一个问题激起了我的兴趣,原链接如下

 https://www.zhihu.com/question/22504189/answer/36812048
原问题是写一个函数返回一个页面里共使用了多少种html tag。
 
这个问题乍一看好像挺复杂,刚开始以为需要遍历DOM树一个一个累加,但后来觉得这样过于复杂(因为收集文档所有元素对象是个问题),后来就由于搬家的缘故搁置了一段时间,再后来我在重新复习操作DOM方法的时候发现document.getElementsByTagName("*");可以解决上述收集文档所有元素对象的问题,既然这样那就好办了,先用document.getElementsByTagName("*");收集所有元素对象(除<!DOCTYPE html>文档信息标签外)的HTMLCollection对象(记住,不是NodeList对象,《javascript权威指南》原书里说错了),这是一个类数组对象,可以遍历每个元素对象将每个元素对象的标签名推入另一个数组用来存放标签名,这样就收集到所有元素的标签名了。
 
但另一个问题出现了:怎样计算这个存放标签名的数组里究竟有多少种标签名呢?只要计算出有多少种标签名就对应知道有多少种HTML tag了。我当初想过将每个标签名首字母相同的收集在一起成为一个数组:
// tagNames数组用来存放标签名

// array是存放首字母相同的标签名的数组

var array=tagNames.filter(function(element){
    return element.indexOf(theFirstLetter)===0?true:false;
});

但同样发现这样不现实而且很麻烦,因为这样还要比较第二个字母,第三个,第四个。。。。。。。。。。。。

后来我发现数组的sort()方法可以解决这个问题,因为sort()方法排序是按ASCII排序的,也就是说,标签名相同的元素会排在一起,这样只要排序后遍历array数组,发现下一个标签名不同就可以计数加一,相同的聚在一起就不加一,就OK了。我把我的思路写在这里:https://github.com/linweinb/JavaScript/blob/master/test/countNumberOfTagSort.html

以上是关于统计页面使用标签种类数的主要内容,如果未能解决你的问题,请参考以下文章

统计各个分类和标签下的文章数

用java怎统计windows目录下的文件种类数(后缀名)?相同种类的个数??急用??详细点!!哥是个文盲的!

Wagtail - 在页面上呈现带有相关片段和标签的数据时遇到问题

如何在多个页面使用同一个HTML片段

切换页面后标签内容消失

几条jQuery代码片段助力Web开发效率提升