如何使用js计算一个html页面有多少种标签？

参考答案：

分析

这道题看似简单，但是是一个很有价值的一道题目。它包含了很多重要的知识：

• 如何获取所有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元素了。