统计当前页面出现的所有标签.md

统计当前页面出现的所有标签

• document.querySelectorAll('*')
• document.getElementsByTagName('*') 其获取的是一个 NodeList 的类数组。
• $$('*')
• document.all — 已废弃，不建议使用

获取到所以标签后，我们可以进一步的操作。

获取标签名数组

const tagNameList = [...document.getElementsByTagName('*')].map(
  (v) => v.tagName
)

标签种类统计

const tagNameNums = new Set([
  ...[...document.getElementsByTagName('*')].map((v) => v.tagName)
])

tagNameNums.size

统计标签出现的次数

const reduceResult = [...document.getElementsByTagName('*')]
  .map((v) => v.tagName)
  .reduce((obj, item) => {
    obj[item] = obj[item] ? obj[item] + 1 : 1
    return obj
  }, {})

// 转为数组
const reduceResultEntries = Object.entries(reduceResult)
// 排序
const sortReduceList = Object.entries(reduceResult).sort((a, b) => b[1] - a[1])
// 输出前三名
sortReduceList.slice(0, 3)