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进阶-RabbitMQ队列/Memcached/Redis 本节内容: RabbitMQ队列 Memcached Redis 1. RabbitMQ ...
- 文件和I/O
一.读写文本数据 (1)使用open()函数配合rt模式读取文本文件的内容:( t 为默认的文本模式) (2)执行写入操作,使用wt模式,如果待操作文件已存在,会清除并覆盖其原先的内容: (3)对已存 ...
- 【概率论】4-2:期望的性质(Properties of Expectation)
title: [概率论]4-2:期望的性质(Properties of Expectation) categories: - Mathematic - Probability keywords: - ...
- php使用ZipArchive提示Fatal error: Class ZipArchive not found in的解决方法
使用压缩包函数必须要安装zip扩展,否则会报错 $ apt install php-zip
- P1169 [ZJOI2007]棋盘制作——悬线法
---恢复内容开始--- 给你一个矩阵,选出最大的棋盘,棋盘的要求是黑白相间(01不能相邻),求出最大的正方形和矩形棋盘的面积: 数据n,m<=2000; 这个一看就可能是n2DP,但是写不出. ...
- codeforces392B
CF392B Tower of Hanoi 题意翻译 河内塔是一个众所周知的数学难题.它由三根杆和一些可以滑动到任何杆上的不同尺寸的圆盘组成.难题从一个整齐的杆中开始,按照尺寸从小到大的顺序排列,最小 ...
- JavaWeb_(Spring框架)Spring中IoC与DI概念入门
Spring是于2003 年兴起的一个轻量级的Java 开源框架,它由Rod Johnson创建.传统J2EE应用的开发效率低,Spring作为开源的中间件,提供J2EE应用的各层的解决方案,Spri ...
- ios编译库文件时出现的问题
1. 警告:directory not found for option "xxxxxxxx" 文件路径未找到 选择工程, 编译的 (targets) 选择 Build Setti ...
- MyBatis入门使用
MyBatis入门使用 MyBatis简介 MyBatis是支持普通SQL查询.存储过程和高级映射的持久层框架.MyBatis消除了几乎所有的JDBC代码和参数的手工设置以及结果集的检索.MyBati ...
- 基本PSO算法实现(Java)
一.算法流程 Step1:初始化一群粒子(粒子个数为50个),包括随即位置和速度: Step2:计算每个粒子的适应度fitness: Step3:对每个粒子,将其适应度与其进过的最好位置(局部)pbe ...