如何使用Javascript或jQuery在网页上找到最常用的类？

Question

想知道是否有一种方法可以显示页面上使用的类的列表，并显示该页面上出现的次数。 像这样：

sublevel | 12
tag | 10
main | 1

Answer 1

使用CSS属性选择器选择具有属性class所有元素。 然后遍历集合的每个元素，访问其className属性并计算每个类的出现次数：

 var classes = {}; // the classes counter document.querySelectorAll("[class]").forEach(function(el) { // select all the element that have a class attribute el.className.trim().split(/\\s+/).forEach(function(clazz) { // get the className of this element, trim it, and split it into individual classes // for each class, increment or initialize the counter if(classes[clazz]) classes[clazz]++; else classes[clazz] = 1; }); }); console.log(classes); 

 <div class="AB"> <span class="B"></span> </div> <p class="ABC"></p> 

Answer 2

没有类似这样的内置API。 您需要检查每个元素的类名称。 要获取每个元素，您必须遍历DOM或获取所有元素的列表并对其进行迭代。 这是执行后者的简单解决方案：

const classes = new Map();

for (let elem of document.querySelectorAll('*')) {
  for (let cls of elem.classList) {
    classes.set(cls, (classes.get(cls) || 0) + 1);
  }
}

const rankedClasses = Array.from(classes).sort((a,b) => b[1] - a[1]);

无法说走DOM是否更有效率。

Answer 3

与大多数其他方法相同：获取所有元素并遍历它们，计算每个className出现的次数。 唯一的不同是它尝试与回到ES5的浏览器兼容。 需要reduce ， forEach和Object.create IE 8的polyfills。

 function countClasses(root) { root = root || document; return [].reduce.call(root.getElementsByTagName('*'), function (classes, el) { (el.className.match(/\\S+/g) || []).forEach(function(cls) { classes[cls]? ++classes[cls] : classes[cls] = 1; }); return classes }, Object.create(null)); } console.log(countClasses()); 

 <div class="foo bar"> <span class="foo"></span><span class="bar fum"></span><span></span> </div>