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 ...
随机推荐
- SVN安装与汉化
官网地址:http://tortoisesvn.net/downloads.html 如地址过期可自行百度官网,下载安装包安装64/32位 如果需要汉化的同学,同样在下载页面,往下拉Language ...
- angularjs 动态计算平均值
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 【题解】间隔排列-C++
题目Description小Q是班长.在校运动会上,小Q班要进行队列表演.小Q要选出2*N名同学编队,每人都被编上一个号,每一个从1到N的自然数都被某2名同学佩戴,现在要求将他们排成一列,使两个编号为 ...
- java试题复盘——11月13日
上: 10. AccessViolationException异常触发后,下列程序的输出结果为( A ) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 AccessViol ...
- 多层树级关系的json,递归删除空值的数据
data =[{ "name": "省", "children":[ { "name": "市区", ...
- global 和 nonlocal关键字
当内部作用域想修改外部作用域的变量时,就要用到global和nonlocal关键字了. def fun(): global num1 num1=2 print("函数内修改后num1=&qu ...
- 图的深度优先遍历(DFS)和广度优先遍历(BFS)算法分析
1. 深度优先遍历 深度优先遍历(Depth First Search)的主要思想是: 1.首先以一个未被访问过的顶点作为起始顶点,沿当前顶点的边走到未访问过的顶点: 2.当没有未访问过的顶点时,则回 ...
- 使用Vagrant配置本地开发环境
从二零一四年开始使用vagrant+VirtualBox搭建linux开发环境,配置简单灵活,后台运行占用内存少,比vmware好用很多,果断弃用vmware转投vagrant的怀抱:无论是个人搭建开 ...
- 路由传值及获取参数,路由跳转，路由检测，this.$route.query和this.$route.params接收参数，HttpGet请求拼接url参数
配置动态路由参数id: routes: [ // 动态路径参数 以冒号开头 { path: '/user/:id', component: User } ] html路由跳转: <router- ...
- ThinkPHP使用smarty模板引擎的方法
ThinkPHP支持多种php模板引擎,可以根据个人需要加以配置.下面我们以Smarty模板引擎为例,给大家说说具体的操作流程! 首先去Smarty官网上下载一个Smarty.本站下载地址:http: ...