// 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. mouseleave([[data],fn])

    mouseleave([[data],fn]) 概述 当鼠标指针离开元素时,会发生 mouseleave 事件.该事件大多数时候会与mouseenter 事件一起使用. 与 mouseout 事件不同 ...

  2. 001_89C52之_Proteus_ADC0809采集电压

    一)使用ADC0809采集直流电压 1. 第一个数码管显示的是采样输入口 2. 后面三位是采样电压 (二)使用ADC0809进行交流电的采样 1. 先进行交流电降压,即用变压器降压后使用整桥电路进行整 ...

  3. MySQL 5.7 GTID OOM bug案例分析 --大量压测后主从不同步

    转载自:http://www.sohu.com/a/231766385_487483 MySQL 5.7是十年内最为经典的版本,这个观点区区已经表示过很多次.然而,经典也是由不断地迭代所打造的传奇.5 ...

  4. Security Study

    1.WebGoat http://www.owasp.org.cn/ 学习Web应用漏洞最好的教程----WebGoat http://blog.csdn.net/bill_lee_sh_cn/art ...

  5. P3368 【模板】树状数组 2

    原题链接  https://www.luogu.org/problemnew/show/P3368 这个题和洛谷P3374树状数组1 有些不同,在普通的树状数组上运用了差分的知识.(由于P3374涉及 ...

  6. 前端逼死强迫症系列之css

    一.编写css样式 1.ID选择器 由于ID唯一,所以也是写多遍. <head> <style> #i1{ background-color: #2459a2; height: ...

  7. <cmath>库函数

    C++ cmath库中的函数 今天模拟,想调用<cmath>中的函数,然鹅...突然忘了,所以还是总结一下吧 写法 作用 int abs(int i) 返回整型参数i的绝对值 double ...

  8. 重读APUE(3)-dup与文件表项

    下图为调用dup之后的文件指针状态,包含如下信息: 1. dup选择了一个最小的未使用的描述符3: 2. dup(1)之后,描述符1和描述符3指向同一个文件表项: 3. dup(1)的返回值即为复制得 ...

  9. vue中书写JSX一些坑-特殊属性名

    举例说明, T1和T2引用Sub时, key2会出现在props以及data.attrs中, 而key则在data中 const Sub = ({data, props}) => { conso ...

  10. ArcGIS超级工具SPTOOLS-制图篇

    1.1  梯形接幅表的创建 视频:https://weibo.com/tv/v/Hvq9KzKKQ?fid=1034:4374886702060760 根据一个图层范围,生成接幅表,支持地图比例尺有1 ...