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

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

当然，至于啥性能之类的没有思考。

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

转载和抓去本页请附上链接http://www.cnblogs.com/yupinghua/p/6235143.html

2017.01.12

更新一下，今天复习了一下call和apply，代码应该还是可以更简单一点

var nodelist = Array.prototype.slice.call(document.getElementsByTagName("*"));

console.log(nodelist.filter((ele,pos,self) => self.indexOf(ele) == pos));
console.log(nodelist.filter((ele,pos,self) => self.indexOf(ele) == pos).length);

参考来自于https://www.zhihu.com/question/20289071/answer/14644278

这里提到，当用call和apply时，可以将当前对象this 改变指向，指向Array对象时就可以使用此对象的方法。