js统计页面中各个标签出现的次数，倒序排列
// 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统计页面中各个标签出现的次数，倒序排列的更多相关文章
- 用JS改变页面中b标签的样式啊 样式的等
用JS改变页面中b标签的样式啊 样式的等 ,实际上是在标签内加上样式 ,用媒体查询的话 ,不能生效 <!DOCTYPE html> <html lang="en&qu ...
- js 和 css 中 不能使用 jsp 页面中一些 标签 和 java 代码等，应注意
js 和 css 中 不能使用 jsp 页面中一些 标签 和 java 代码等,应注意 如 ${ } <%%> 等
- JS基础入门篇（ 三 ）—使用JS获取页面中某个元素的4种方法以及之间的差别（ 一 ）
1.使用JS获取页面中某个元素的4种方法 1.通过id名获取元素 document.getElementById("id名"); 2.通过class名获取元素 document.g ...
- 禁止手机页面中A标签长按弹出路径框
//禁止手机页面中A标签长按弹出路径框 window.onload=function(){ document.documentElement.style.webkitTouchCa ...
- 在php中，如何将一个页面中的标签，替换为用户想输出的内容
前言:釜山行,暴露人性, ———————————————————————————————————————————————————————————————————————————— 今天说一个最简单的例 ...
- js去除字符串中的标签
var str="<p>js去除字符串中的标签</p>"; var result=str.replace(/<.*?>/ig,"&qu ...
- 找到你的位置（JS在页面中的位置）最常用的方式是在页面中head部分放置<script>元素，浏览器解析head部分就会执行这个代码，然后才解析页面的其余部分
找到你的位置(JS在页面中的位置) 我们可以将JavaScript代码放在html文件中任何位置,但是我们一般放在网页的head或者body部分. 放在<head>部分 最常用的方式是在页 ...
- js 查找数组中某个字符出现的次数
1. js 查找数组中某个字符出现的次数 代码示例 let arr = ['asd', 'green', 'yeadt', 'red', 'wati', 'red', 'red'] let index ...
- PHP array_count_values() 函数用于统计数组中所有值出现的次数。
定义和用法 array_count_values() 函数用于统计数组中所有值出现的次数. 本函数返回一个数组,其元素的键名是原数组的值,键值是该值在原数组中出现的次数. 语法 array_count ...
随机推荐
- python自动华 （十二）
Python自动化 [第十二篇]:Python进阶-MySQL和ORM 本节内容 数据库介绍 mysql 数据库安装使用 mysql管理 mysql 数据类型 常用mysql命令 创建数据库 外键 增 ...
- MySQL建立索引的原则
1.表的主键.外键必须有索引; 2.数据量超过300的表应该有索引; 3.经常与其他表进行连接的表,在连接字段上应该建立索引; 4.经常出现在Where子句中的字段,特别是大表的字段,应该建立索引; ...
- HR#4 题解
既然考这么差就来写题啦OTZ T1 猜结论?猜nm! 一直到考试结束都没猜出来=.=我就好奇别人如何猜出来的 我们来说DP(from ZBK) 设\(dp[i][j]\)表示胜or负 那我们来看一下代 ...
- ES 集中式日志分析平台 Elastic Stack（介绍）
一.ELK 介绍 ELK 构建在开源基础之上,让您能够安全可靠地获取任何来源.任何格式的数据,并且能够实时地对数据进行搜索.分析和可视化. 最近查看 ELK 官方网站,发现新一代的日志采集器 File ...
- redis系列（三）：python操作redis
1.安装包 pip install redis 2.使用 # -*- coding: utf-8 -*- # @Time : 18-12-7 下午4:33 # @Author : Felix Wang ...
- 简单删除我的电脑里的wps云文档图标
装个wps,用着都挺好,我的电脑一直存在wps云文档的图标. 看久了就觉得很膈应,那就直接干掉吧. 桌面新建一个文本文件,选中新建文本文档.txt 按f2 然后修改为11.reg(任意名称只要保证后缀 ...
- overflow妙用--去除默认滚动条，内容仍可滚动
在开发中我们往往要去除默认滚动条,但是其在竖直方向的滚动效果仍然需要. <div id="parent"> <div id="child"&g ...
- 【Python】使用Python处理RAW格式图片，并根据实际情况完成分组打包发送
背景 出游之后,朋友交换的照片格式大多是RAW格式,一些人想要JPG格式,但是百度云盘非会员的下载速度惨不忍睹,所以我想着通过微信群直接传(这个在事后也被证实不能完全解决问题,微信限制了每天传递文件的 ...
- pwn学习日记Day19 《程序员的自我修养》读书笔记
windows PE/COFF章总结 本章学习了windows下的可执行文件和目标文件格式PE/COFF.PE/COFF文件与ELF文件非常相似,它们都是基于段的结构的二进制文件格式.Windows下 ...
- 使用 Linux Mint 作为主要操作系统的一些个人常用软件
本篇文章讲一下一些 Linux 上的应用,多数为日常生活娱乐用的软件,同时也会讲一点开发工具,对于有兴趣继续研究 Linux 的可以参考一下. 目录 软件的安装方式 1.Software Manage ...