// 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. maven+struts2例子

    本文在开发第一个maven示例的基础上进行扩展. 第一个maven示例目录结构如下: 扩展后目录为: 打开pom.xml 在WEB-INF文件夹下新建web.xml: <?xml version ...

  2. P5312 [Ynoi2011]D2T1

    思路:01trie 按位维护 提交:5边 错因:爆int + 少处理询问时的右端点 题解: 见代码(已经不想说什么了) 代码 //I have my own flg; #include<bits ...

  3. update更新操作的URL地址

    http://localhost:8080/updateById/110?name=诸葛亮&age=3

  4. redis系列（二）：数据操作

    1.string类型 字符串类型是Redis中最为基础的数据存储类型,它在Redis中是二进制安全的,这便意味着该类型可以接受任何格式的数据,如JPEG图像数据或Json对象描述信息等.在Redis中 ...

  5. CComboBoxEx添加图像CImageList无法正常显示

    <1>给控件 CComboBox绑定变量 .cpp中 DDX_Control(pDX, IDC_COMBO_PHOTO_IMG, m_ComboBoxPhotoImg); CComboBo ...

  6. vscode集成eslint

    1. 安装 ESLint 扩展 首先,打开 VSCode 扩展面板并搜索 ESLint 扩展,然后点击安装 2. 项目安装eslint yarn add eslint -D 3. 设置eslint配置 ...

  7. luogu2331

    P2331 [SCOI2005]最大子矩阵 题目描述 这里有一个n*m的矩阵,请你选出其中k个子矩阵,使得这个k个子矩阵分值之和最大.注意:选出的k个子矩阵不能相互重叠. 输入格式 第一行为n,m,k ...

  8. 获取 Django版本号的两种方式

    one k@ubuntu:~$ python Python ( , ::) [GCC ] on linux2 Type "help", "copyright", ...

  9. 基于Kafka+ELK搭建海量日志平台

    早在传统的单体应用时代,查看日志大都通过SSH客户端登服务器去看,使用较多的命令就是 less 或者 tail.如果服务部署了好几台,就要分别登录到这几台机器上看,等到了分布式和微服务架构流行时代,一 ...

  10. 阿里云上搭建git

    这篇文章我就来介绍一下如何在一台全裸的阿里云主机上搭建自己的git服务器. 1. 安装git 首先安装git,一般而言,现在的服务器已经内置了git安装包,我们只需要执行简单的安装命令即可安装.比如: ...