分析
这道题看似简单,但是是一个很有价值的一道题目。它包含了很多重要的知识:
如何获取所有DOM节点伪数组如何转为数组去重
那么针对这道题目我们来解答一下,就拿当前页面为例吧。
解答
获取所有的DOM节点。
document
.querySelectorAll('*')
此时得到的是一个NodeList集合,我们需要将其转化为数组,然后对其筛选。
转化为数组
[...document
.querySelectorAll('*')]
一个拓展运算符就轻松搞定。
获取数组每个元素的标签名
[...document
.querySelectorAll('*')].map(ele
=> ele
.tagName
)
使用一个map方法,将我们需要的结果映射到一个新数组。
去重
new Set([...document
.querySelectorAll('*')].map(ele
=> ele
.tagName
)).size
我们使用ES6中的Set对象,把数组作为构造函数的参数,就实现了去重,再使用Set对象的size方法就可以得到有多少种HTML元素了。
总结
只要ES6用的好,这些操作就是小case了。其实去重有很多很多方法,我这里只是列出一种,不过条条道路通罗马,只要实现就完全OK。