如何获取DOM中所有类名的出现频率？

嗨，我完全理解手动在DevTools里找重复类名有多麻烦，给你一个直接能用的脚本，一键统计页面上所有类名的出现频率：

核心实现代码 #

你可以直接把这段代码复制到浏览器控制台（按F12打开控制台）运行：

const classFrequency = {};
// 获取页面所有DOM元素
const allElements = document.querySelectorAll('*');

allElements.forEach(element => {
  // 把元素的类列表转为数组遍历
  Array.from(element.classList).forEach(className => {
    // 统计次数：存在则+1，不存在则初始化为1
    classFrequency[className] = (classFrequency[className] || 0) + 1;
  });
});

// 打印结果到控制台
console.log('类名出现频率统计结果：', classFrequency);

效果演示 #

针对你给出的示例DOM结构：

<div class='wrapper'> 
  <div class='child first'></div> 
  <div class='child second'></div> 
</div>

运行脚本后会输出：

{ wrapper: 1, child: 2, first: 1, second: 1 }

额外小技巧 #

• 限定统计范围：如果不想统计整个页面，只想统计某个容器内的元素，把document.querySelectorAll('*')换成目标容器的查询，比如：

  const targetContainer = document.querySelector('.your-target-container');
  const allElements = targetContainer.querySelectorAll('*');
  

• 处理动态内容：如果页面有异步加载的内容，建议把代码放在DOMContentLoaded事件里，确保DOM加载完成后再执行：

  document.addEventListener('DOMContentLoaded', () => {
    // 这里放统计代码
  });
  

内容的提问来源于stack exchange，提问作者Nermin