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

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

分享一下三个问题：

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

2. 出现最多的三种元素

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

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

1. 获取到页面中所有的标签元素

   document.querySelectorAll('*');
   

2. 拿到标签元素

   [...document.querySelectorAll('*')].map(v=>v.tagName);
   

3. 去重拿到出现了几种标签元素

   new Set([...document.querySelectorAll('*')].map(v => v.tagName)).size;
   

二. 出现最多的三种元素

1. 拿到每个标签元素出现的次数；

[...document.querySelectorAll('*')].map(v => v.tagName).reduce((res, a) => {
    res[a] = (res[a] || 0) + 1;
    return res;
}, {});

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);

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

var child = document.children;

　　var arr = [];//用来存放获取到的所有的标签

　　function fn(obj){

　　　　for(var i=0;i<obj.length;i++){

　　　　　　 if(obj[i].children){//当当前元素还存在子元素的时候,递归

　　　　　　　　fn(obj[i].children);

　　　　　　　}

　　　　　　 arr.push(obj[i]); //遍历到的元素添加到arr这个数组中间
　　　　}

　　}

fn(child);

console.log(arr);//打印出最后获取到的结果