// html

<html>

    <div>hello</div>

    <div>world</div>

    <a href=""></a>

</html>

//输出一个数组

const result = [{tag:'div',num: 100}, {tag: 'div',num: 80}];


<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

    <div class="hello">

        <ul>

            <li></li>

            <li></li>

            <li></li>

        </ul>

    </div>

    <section>

        <aside>

        </aside>

        <p>

            <span></span>

            <span></span>

            <span></span>

            <span></span>

        </p>

    </section>

</body>

<script>

    // 方法一

    var res = []

    var nodelist = document.body.getElementsByTagName('*') // 拿到就是扁平的，不需要递归

    var obj = {}

    for (let i = 0; i < nodelist.length; i++) {

        // localName == tagName.toLowerCase()

        if (obj[nodelist[i].localName]) {

            obj[nodelist[i].localName] ++

        } else {

            obj[nodelist[i].localName] = 1

        }

    }

    for (const key in obj) {

        res.push({

            tag: key,

            num: obj[key]

        })

    }

    res.sort((a,b) => (b.num - a.num))

    console.log(obj)

    console.log(res)

    // 方法二 递归

    var res1 = []

    var obj1 = {}

    function count (node) {

        var tagName = node.nodeName.toLowerCase()

        if (obj1[tagName]) {

            obj1[tagName] ++

        } else {

            obj1[tagName] = 1

        }

        if (node.children) {

            for (let i = 0; i < node.children.length;i++) {

                count(node.children[i])

            }

        }

    }

    count(document.body)

    for (const key in obj1) {

        res1.push({

            tag: key,

            num: obj1[key]

        })

    }

    res1.sort((a,b) => (b.num - a.num))

    console.log(obj1)

    console.log(res1)

</script>

</html>

js统计页面中各个标签出现的次数，倒序排列的更多相关文章

  1. 用JS改变页面中b标签的样式啊 样式的等

    用JS改变页面中b标签的样式啊 样式的等    ,实际上是在标签内加上样式 ,用媒体查询的话 ,不能生效 <!DOCTYPE html> <html lang="en&qu ...

  2. js 和 css 中 不能使用 jsp 页面中一些 标签 和 java 代码等，应注意

    js  和 css 中 不能使用 jsp  页面中一些 标签 和 java 代码等,应注意 如 ${ }  <%%>  等

  3. JS基础入门篇（ 三 ）—使用JS获取页面中某个元素的4种方法以及之间的差别（ 一 ）

    1.使用JS获取页面中某个元素的4种方法 1.通过id名获取元素 document.getElementById("id名"); 2.通过class名获取元素 document.g ...

  4. 禁止手机页面中A标签长按弹出路径框

    //禁止手机页面中A标签长按弹出路径框    window.onload=function(){        document.documentElement.style.webkitTouchCa ...

  5. 在php中，如何将一个页面中的标签，替换为用户想输出的内容

    前言:釜山行,暴露人性, ———————————————————————————————————————————————————————————————————————————— 今天说一个最简单的例 ...

  6. js去除字符串中的标签

    var str="<p>js去除字符串中的标签</p>"; var result=str.replace(/<.*?>/ig,"&qu ...

  7. 找到你的位置（JS在页面中的位置）最常用的方式是在页面中head部分放置<script>元素，浏览器解析head部分就会执行这个代码，然后才解析页面的其余部分

    找到你的位置(JS在页面中的位置) 我们可以将JavaScript代码放在html文件中任何位置,但是我们一般放在网页的head或者body部分. 放在<head>部分 最常用的方式是在页 ...

  8. js 查找数组中某个字符出现的次数

    1. js 查找数组中某个字符出现的次数 代码示例 let arr = ['asd', 'green', 'yeadt', 'red', 'wati', 'red', 'red'] let index ...

  9. PHP array_count_values() 函数用于统计数组中所有值出现的次数。

    定义和用法 array_count_values() 函数用于统计数组中所有值出现的次数. 本函数返回一个数组,其元素的键名是原数组的值,键值是该值在原数组中出现的次数. 语法 array_count ...

随机推荐

  1. [ES2019] Represent Collision-free String Constants as Symbols in JavaScript

    ES2019 introduces the Symbol.prototype.description property. In this lesson, we'll learn why this pr ...

  2. 022_统计每个远程 IP 访问了本机 apache 几次?

    #$1为IP#i为不同的IP#print ip[i],i 输出不同IP出现的次数总和以及它们是谁#ip[$1]++ 未定义则从0开始,IP出现则自增 #!/bin/bashawk '{ip[$1]++ ...

  3. 牛客 17439：Endless Pallet

    题目传送门 算法:min-max 容斥.树上背包.NTT. 题意简述 有一棵 \(n\) 个点的树.一开始所有点都是白色,每次操作会随机选择 \(\frac{n \times (n + 1)}{2}\ ...

  4. [Luogu] 兽径管理

    题面:https://www.luogu.org/problemnew/show/P1340 题解:https://www.zybuluo.com/wsndy-xx/note/1153773

  5. 最小生成树&&次小生成树

    对于一个边上具有权值的图来说,其边权值和最小的生成树叫做图G的最小生成树 求无向图最小生成树主要有prim和kruskal两种算法 1.prim 将点集V分成Va和Vb两部分,Va为已经连入生成树的点 ...

  6. 数据结构实验之栈与队列六：下一较大值（二）（SDUT 3333）

    #include <bits/stdc++.h> using namespace std; int a[1000006]; int b[1000006]; int sta[100006]; ...

  7. input上传mp3格式文件，预览并且获取时间

    <input type="file" id="file" name="file" class="upfile" o ...

  8. css定位中的百分比

    ----转载自自己在牛人部落中的相关文章--- 在前端css定位中经常面对的一个问题是,百分比定位究竟是针对于谁定位? 一.margin,padding的百分比 首先从css的设计意图说起,在浏览器默 ...

  9. java基础篇之Object类

    1.Object类是所有类的超类 2.Object类的equals方法 public boolean equals(Object obj) {return (this == obj);} equals ...

  10. vue cli 安装element-ui

    1.安装elment-ui --save 参数:上线打包 MacBookPro:vue_test zhangxm$ npm install element-ui axios --save npm WA ...