Appearance
统计当前页面出现次数最多的标签
如何找到当前页面出现的所有标签
- 查找页面所有的DOM 有三种 API 可以列出页面所有标签：
- document.querySelector('*')，标准规范实现
- document.getElementsByTagName('*')
- document.all，已废弃，不建议使用
- 遍历去重 document.querySelector('*') 获得DOM对象列表
[NodeList]是一个类数组
将类数组转成数组进行处理 处理方式：
[...new Set(domList)]Array.prototype.slice.call(domList)Array.form(domList)
示例代码
js
const domList = document.querySelectorAll('*')
const nodeList = new Set(Array.prototype.slice.call(domList).map(n=>n.nodeName))
追问：如何找到当前页面出现次数最多的 HTML 标签
与第一题不同， 关键词 HTML标签， 最多
element.nodeName 和 element.tagName 区别？ 相同点： 都是用来获取 HTML 节点名称的属性。 tagName 用于获取节点类型为 1 的元素节点的类型。 对于属性、注释、文本等其他类型的节点，使用 nodeName 获取节点的名称。 nodeName 包含 tagName
实现
- 获取所有的 HTML 标签
- 遍历所有标签，记录出现次数
- 排序，返回数组尾部
js
const tagList = [...document.querySelectorAll('*')].map(n => n.tagName)
const map = new Map()
tagList.forEach(item => {
if(!map.has(item)) {
map.set(item, 0)
}
map.set(item, map.get(item)+1)
})
const result = [...map.entries()].reduce((a, b) => b[1] > a[1] ? b : a)
追问： 1. 如何找到当前页面出现次数前三多的 HTML 标签
js
const tagList = [...document.querySelectorAll('*')].map(n => n.tagName)
const map = new Map()
tagList.forEach(item => {
if(!map.has(item)) {
map.set(item, 0)
}
map.set(item, map.get(item)+1)
})
const result = [...map.entries()].sort((a, b) => b[1] - a[1]).slice(0, N)
console.log(result)
追问： 2. 如果多个标签出现次数同样多，则取多个标签
思路: 计算每个标签出现的次数，遍历数组，将出现相同次数的标签，推入同一个数组中