统计页面使用标签种类数

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

 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

原文地址:https://www.cnblogs.com/linweinb/p/8386910.html