使用js获取页面所有标签及个标签数量

最新推荐文章于 2023-08-07 15:54:46 发布

King_960725

最新推荐文章于 2023-08-07 15:54:46 发布

阅读量2.1k

点赞数

分类专栏： JavaScript学习日志文章标签： JavaScript 页面元素节点获取数量统计 DOM操作

本文链接：https://blog.csdn.net/weixin_42566993/article/details/124869398

版权

JavaScript学习日志专栏收录该内容

29 篇文章 0 订阅

订阅专栏

需求：使用js获取页面所有标签及个标签数量

代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script>
    window.onload = function () { 
      let elements = document.getElementsByTagName('*');
      elements = Array.from(elements).map((item)=>{
        return item.nodeName.toLowerCase();
      }).sort();

      function qc(arr) {  
        let Ele = [...new Set(arr)];
        let obj = {};
        let results = [];
        arr.forEach(v=>{
          if(obj[v]){
            obj[v]++;
          }else {
            obj[v]=1;
          }
        })
        Ele.forEach(v=>{
          results.push({
            nodeName: v,
            num: obj[v]
          })
        })
        return results;
      }
      function compare(num,attr){
        return function(o1,o2){
          if(attr === 'asc'){//asc升序 desc降序
            return o1[num] < o2[num] ? -1 : 1;
          }else {
            return o1[num] > o2[num] ? -1 : 1;
          }
        }
      }
      let res = qc(elements).sort(compare('num','desc'));
      
      console.log(res);
    }
  </script>
</head>
<body>
  <div>哈哈</div>
  <span>11</span>
  <div>22</div>
</body>
</html>

King_960725

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
20
评论
使用js获取页面所有标签及个标签数量

需求：使用js获取页面所有标签及个标签数量代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
复制链接

扫一扫