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

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

引子:

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

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

分享一下三个问题:

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

2.出现最多的三种元素

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

分享下我的答案:

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

1-1:

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

返回的数据:

 

 

  

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

  

querySelectorAll() :方法返回文档中匹配指定 CSS 选择器的所有元素,返回 NodeList 对象。 

其实说白了就是,使用此方法,你可以获取到页面中指定class类名的元素标签集合,

ps:

你可以使用 NodeList 对象的 length 属性来获取匹配选择器的元素属性,然后你可以遍历所有元素,从而获取你想要的信息。

  

*:通配符。  

或者是使用上边提到到的 * ,获取页面中所有标签元素的集合。

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

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

  1-2:

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

  返回的数据:

  

 

 

 

    [...document.querySelectorAll('*')]这一段代码就是你拿到标签元素的集合。使用map把标签名字拿到。

    map: 

      map() 方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。

      map() 方法按照原始数组元素顺序依次处理元素。

    这里呢我们使用map用来拿到标签名字。

了解更多相关map方法使用,可以去菜鸟教程哦!

  1-3:

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

返回的数据:

 

通过1-2拿到的数据,使用new Set()方法去重,并拿到标签元素一共有多少种。


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


2.出现最多的三种元素

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

返回的数据:

  

 

 

  reduce()     

      reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。

      reduce() 可以作为一个高阶函数,用于函数的 compose。

    这里呢说白了就是拿到所有标签名之后使用reduce()方法,去做循环处理,res[a]=(res[a] || 0)+1;,最后得到每个标签元素的个数。

    本人理解这个方法类似于for循环,如果符合条件就++。

了解更多相关reduce方法使用,可以去菜鸟教程哦!


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);
//排序,拿到出现最多的前三个标签元素

返回的数据:


 

   这里就拿到出现最多的三个标签元素,关于sort()他是排序用的,相信大家都会,就不在这里多做解释了,slice则是返回前三个,去掉slice就可以拿到所有标签元素的排序数组了。

 

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);//打印出最后获取到的结果

返回的数据:

 

 

这里返回的数据其实和第一步是一样的,只不过是这里使用了递归的方法,如果有子级标签元素那么就一直调用自己。

同样的接下来你也可以用拿到的arr进行,去重,排序,等等一系列操作。
document.children
children() 方法返回返回被选元素的所有直接子元素。
更多关于children()的使用方法可以去W3schol了解哦!


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




  
posted @ 2019-11-15 10:57  蔡徐坤学前端  阅读(735)  评论(0编辑  收藏  举报