如何使用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>