// 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. 51nod 1594 Gcd and Phi 反演

    OTZ 又被吊打了...我当初学的都去哪了??? 思路:反演套路? 提交:\(1\)次 题解: 求\(\sum_{i=1}^{n}\sum_{j=1}^{n}\varphi(gcd(\varphi(i ...

  3. Flutter布局5---Container

    Container 容器 简介一个常用的widget,它结合了常见的绘画,定位和大小调整·该容器首先让child填充绘制,然后再将其他的约束应用于填充范围.·在绘画过程中,容器先应用给定的转换,再绘制 ...

  4. 【深入学习Redis】Redis内存模型

    前言 Redis是目前最火爆的内存数据库之一,通过在内存中读写数据,大大提高了读写速度,可以说Redis是实现网站高并发不可或缺的一部分. 我们使用Redis时,会接触Redis的5种对象类型(字符串 ...

  5. CF811E Vladik and Entertaining Flags

    嘟嘟嘟 看题目这个架势,就知道要线段树,又看到维护联通块,那就得并查集. 所以,线段树维护并查集. 然而如果没想明白具体怎么写,就会gg的很惨-- 首先都容易想到维护区间联通块个数和区间端点两列的点, ...

  6. CSP-S 模拟测试94题解

    T1 yuuustu: 可以对两边取对数,然后就转化为两个double的比较,时间复杂度$O(n)$ 然后我就用神奇0.4骗分水过 #include<bits/stdc++.h> usin ...

  7. 【luogu1016】旅行家的预算--模拟

    题目描述 一个旅行家想驾驶汽车以最少的费用从一个城市到另一个城市(假设出发时油箱是空的).给定两个城市之间的距离D1D1D1.汽车油箱的容量CCC(以升为单位).每升汽油能行驶的距离D2D2D2.出发 ...

  8. 如何用 Windows Live Writer 和 Word 2013 分别发表博客到Cnblog 和CSDN

    ps CSDN 老是505错误,放弃了 为什么会写这篇 最近写博客在 Cnblog 上面写博客, 发现图片不能复制了直接粘贴上,这对于把博客当随手笔记的人来说无疑非常痛苦.求助于博客园,他们让我用 W ...

  9. 学习ArrayList的扩容机制

    基于jdk8 1.首先我们看new ArrayList中 public ArrayList() { this.elementData = DEFAULTCAPACITY_EMPTY_ELEMENTDA ...

  10. 【java】[sql]使用Java程序向MySql数据库插入一千万条记录，各种方式的比较，最后发现insert批量插入方式对效率提升最明显

    我的数据库环境是mysql Ver 14.14 Distrib 5.6.45, for Linux (x86_64) using EditLine wrapper 这个数据库是安装在T440p的虚拟机 ...