// 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. git 之 .gitignore文件

    所有空行或者以注释符号 # 开头的行都会被 Git 忽略 匹配模式最后跟反斜杠(/)说明要忽略的是目录 要忽略指定模式以外的文件或目录,可以在模式前加上惊叹号(!)取反 *.a # 忽略所有 .a 结 ...

  2. Verilog Tricks

    1,可用generate产生512*FIFO 2,Vivado的warning也要全部排除 3,小module测完再往大module加 4,复位和IDLE处的置零操作一定要写全了 5,设计通信接收机时 ...

  3. php中的print函数

    php print函数怎么用? 定义和用法 print() 函数输出一个或多个字符串. 注释:print() 函数实际不是一个函数,所以您不必对它使用括号. 提示:print() 函数比 echo() ...

  4. 使用sysbench对MySQL进行压力测试

    1.背景 ​出自percona公司,是一款多线程系统压测工具,可以根据影响数据库服务器性能的各种因素来评估系统的性能.例如,可以用来测试文件IO,操作系统调度器,内存分配和传输速度,POSIX线程以及 ...

  5. ckeditor实现ctrl+v粘贴word图片并上传

    官网地址http://ueditor.baidu.com Git 地址 https://github.com/fex-team/ueditor 参考博客地址 http://blog.ncmem.com ...

  6. CF922D Robot Vacuum Cleaner 贪心+排序

    正确的贪心方法:按照比例排序. code: #include <bits/stdc++.h> #define N 200000 #define ll long long #define s ...

  7. 51nod 1412

    考虑到只与深度和点的个数有关$f[n][d]$ 表示 $n$ 个点,深度为 $d$ 的 $AVL$ 树有多少种 枚举左子树大小为 $i$, 进行转移并且深度为 $logn$ 级别 $f[n][d] = ...

  8. Luogu5298 [PKUWC2018]Minimax

    太久没写博客了,过来水一发. 题目链接:洛谷 首先我们想到,考虑每个叶节点的权值为根节点权值的概率.首先要将叶节点权值离散化. 假设现在是$x$节点,令$f_i,g_i$分别表示左/右节点的权值$=i ...

  9. MySQL 跨版本主从复制时报错：ERROR 1794 (HY000): Slave is not configured or failed to initialize properly.

    背景: zabbix 数据库迁移,搭建主从,主是5.6.25,从是5.7.15,流式备份应用 redo.log 之后,change master 和reset slave 时报出如下错误 mysql& ...

  10. 生产环境缺陷来源VS 缺陷管理响应机制

    生产环境缺陷主要来源于用户反馈.版本内遗留.内部反馈和监控后台报警,具体内容包含以下途径: 1.用户反馈: ①  前台电话方式 ②  意见反馈后台 ③  第三方平台:如微博.App Store等渠道 ...