首页 > 代码库 > 如何获取页面上的所有的标签元素?排除重复的。

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

这个问题应该这样比较好:如何统计页面上用了多少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);

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

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

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