如何获取页面上的所有的标签元素？排除重复的。

Posted 2020-08-25 喻平华

这个问题应该这样比较好：如何统计页面上用了多少html标签元素。

这是我在知乎live上看到的问题，后来讨论了这个https://www.zhihu.com/question/53175578

很多人给出了答案，but，我思来想去也觉得很简单啊，写代码的时候发现完全不知如何下笔，还是菜啊- -！

比如我看到了一个回答 new Set($$("*").map(e => e.tagName)).size;是在控制台输出。可以得到总过用了多少html标签元素的个数。

我心想很简单啊，试试写在脚本里，发现错误 xx.map is a not function ，原来我尝试用的document.getElementsByTagName("*");获取的是一个名为HTMLCollection的集合，非真正意义上的数组，需要转换成数组才能使用。

 下面是我把集合元素的属性tagName提取出来的方法。

1         var nodelist = document.getElementsByTagName("*");
2         var arr = [];
3         for(var i=0; i<nodelist.length; i++){
4             arr.push(nodelist[i].tagName);
5         }
6         console.log(arr.filter((ele,pos,self) => self.indexOf(ele) == pos));
7         console.log(arr.filter((ele,pos,self) => self.indexOf(ele) == pos).length);
8 
9         // console.log(new Set(arr.map(e =>e.tagName)).size);

当然，至于啥性能我是没啥思考啦╮(╯_╰)╭

需要学习得很多，感谢前辈提供的经验！