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 ...
随机推荐
- Django：将模型注册到后台的几种方法
from django.contrib import admin from .models import * #将模型注册到后台: #方法一:将模型直接注册到后台 # admin.site.regis ...
- 004_linuxC++之_函数的重载
(一)源码下载 (一) 函数的重载:同一个命名函数,通过传入参数的不同,调用不一样的函数 上面程序的运行结果: (二)函数只能通过参数的不一样重载函数,不能通过返回参数的不一样重载函数 运行结果报错 ...
- sql server 复习笔记2
主键约束 可以通过定义primary key 约束来定义主键, 用于强制表的实体化完整性,一个表只能有一个主键约束, 并且primary key 约束中的列不能为空值,由于primary key 约束 ...
- vue 中 v-model
一.v-model: 先上段简单的 vue 代码: // 定义 v-model 示例组件 Vue.component('bindData', { template:` <div> < ...
- django使用mysql的时区问题解决
1.如果是linux 将系统的时区表导入mysql. mysql_tzinfo_to_sql /usr/share/zoneinfo 2.如果是windows 下载时区表 然后导入时区表,file_n ...
- P4717 快速沃尔什变换FWT 模板题
#include <bits/stdc++.h> using namespace std; #define rep(i,a,n) for (int i=a;i<n;i++) #def ...
- Luogu5369 [PKUSC2018]最大前缀和
题目链接:洛谷 题目大意:给定一个长为$n$的整数序列,求全排列的最大前缀和(必须包含第一个数)之和. 数据范围:$1\leq n\leq 20,1\leq \sum_{i=1}^n|a_i|\leq ...
- 前端使用lodop如何获取打印状态
前面已经说过,如何简单使用lodop了,今天说一下如何获得lodop的打印状态? 在教程里面找了半天,摸索出来了一套. template: <!-- 实验代码 --> <div> ...
- Jmeter随机参数各种搭配
参数配置应该有三种场景,具体其他的我还没想到 一.两个固定值之间随机生成一个值,应用场景没有限制 1.最简单的两个值之间随机产生一个整数作为值,打开函数助手 2.选择函数 __Random 然后我想要 ...
- kafka学习汇总系列（一）kafka概述
一.kafka概述 在流式计算中,kafka是用来缓存数据的,storm通过消费kafka的数据进行计算.kafka的初心是,为处理实时数据提供一个统一.高通量.低等待的平台: 1.kafka是一个分 ...