统计网页标签元素，使用次数，排序，递归骚操作——进阶高级前端工程师

首先：本人菜鸟一枚，梦想着进阶高级前端工程师，并为此而努力奋斗（哈哈哈，这里纯属搞笑）

引子：

昨天看了一个百度架构师讲的一个公开课，里面提到了三个问题，最基础的考验你js基础是否扎实的三个问题，如果你一分钟内能够想到方法，能够时候写出来，说明你的基础还是可以的。

现在出现了各种有利于前端开发的各种框架，非常简单，但是看过视频之后，觉得其实最底层的也是jsvsScript，基础最重要，如果你的基础不扎实的话，说实话了解更多的前端框架都是空谈。

分享一下三个问题：

1.统计页面中用了多少种标签

2.出现最多的三种元素

3.通过递归拿到页面中所有的标签元素

分享下我的答案：

1.统计页面中用了多少种标签

1-1：

document.querySelectorAll('*')；//获取到页面中所有的标签元素

返回的数据：

　　

这里所涉及到的其实就一个querySelectorAll()，以及*

　　

　　

　　通过querySelectorAll()，你可以得到标签之后对标签进行任意蹂躏，当然也可以结合css选择器去获取标签元素。

　　想要了解更多的可以去菜鸟教程看一下哦！

　　1-2:

[...document.querySelectorAll('*')].map(v=>v.tagName)；//拿到标签元素

　　返回的数据：

　　

　　1-3：

new Set([...document.querySelectorAll('*')].map(v=>v.tagName)).size；//去重拿到出现了几种标签元素

返回的数据：

到这里就已经完成了第一问，页面中一共使用了40种标签元素。


2.出现最多的三种元素

2-1：

[...document.querySelectorAll('*')].map(v=>v.tagName).reduce((res,a)=>{res[a]=(res[a] || 0)+1 ;  return res;},{})；
//拿到每个标签元素出现的次数；

返回的数据：

　　

2-2:

Object.entries([...document.querySelectorAll('*')].map(v=>v.tagName).reduce((res,a)=>{res[a]=(res[a] || 0)+1 ;  return res;},{})).sort((a,b)=>b[1]-a[1]).slice(0,3)；
//排序，拿到出现最多的前三个标签元素

返回的数据：

3.通过递归拿到页面中所有的标签元素

 1 var child = document.children;
 2
 3 　　var arr = [];//用来存放获取到的所有的标签
 4
 5 　　function fn(obj){
 6
 7 　　　　for(var i=0;i<obj.length;i++){
 8
 9 　　　　　　 if(obj[i].children){//当当前元素还存在子元素的时候,递归
10
11 　　　　　　　　fn(obj[i].children);
12
13 　　　　　　　}
14
15 　　　　　　 arr.push(obj[i]); //遍历到的元素添加到arr这个数组中间
16 　　　　}
17
18 　　}
19
20 fn(child);
21
22 console.log(arr);//打印出最后获取到的结果

返回的数据：

到这里上边提到的三个方法就搞定了，其实这就是最基本的方法，所以基础很重要，基础很重要，基础很重要！！！