如何获取HTML文件中使用Css类的列表？

Question

我需要在html文件中使用的类的列表。有什么工具可以在HTML文件中获得类的列表吗？

Answer 1

这应该工作，它不需要jquery。

var used = []; 
var elements = null; 

//get all elements 
if (typeof document.getElementsByTagName != 'undefined') { 
    elements = document.getElementsByTagName('*'); 
} 

if (!elements || !elements.length) { 
    elements = document.all; // ie5 
} 

//loop over all element 
for (var i = 0; i < elements.length; i++){ 

    //loop over element's classes 
    var classes = elements[i].className.split(' '); 
    for (var j = 0; j < classes.length; j++) { 

     var name = classes[j]; 

     //add if not exists 
     if (name.length > 0 && used.indexOf(name) === -1) { 
      used.push(name); 
     } 
    } 
} 

alert(used.join(' ')); 

功能更强大的方法

var elements = document.getElementsByTagName('*'); 

var unique = function (list, x) { 
    if (x != "" && list.indexOf(x) === -1) { 
     list.push(x); 
    } 
    return list; 
}; 

var trim = function (x) { return x.trim(); }; 

var classes = [].reduce.call(elements, function (acc, e) { 
    return e.className.split(' ').map(trim).reduce(unique, acc); 
}, []); 

Answer 2

看看Dust Me Selectors。

这不完全是你要找的东西，它显示了UNused选择器的列表。不过，我想你可以使用它提供的列表的反转。

这里是链接：http://www.sitepoint.com/dustmeselectors/

Answer 3

如果你有jQuery的网页上，运行此代码：

var classArray = []; 
$('*').each(function(){if(this.className!=""){classArray.push(this.className)}}) 

变量classArray将包含HTML页面上指定的所有类。

Answer 4

我知道这是一个老问题，但来到这里，通过谷歌，所以我怀疑更多的人可以在这里了。

的捷径，利用querySelectorAll和班级名册（这意味着，浏览器的支持可能是一个问题：IE10 for classList和IE8 for querySelectorAll），并与重复，应该是：

var classes = 0, 
elements = document.querySelectorAll('*'); 

for (var i = 0; i < elements.length; i++) { 
    classes = classes + elements[i].classList.length;   
} 

I made a jsFiddle与班级名册回退（其具有“最低”的浏览器支持），如果您不使用classList，它也计算所有元素，所有类和所有具有类的元素。

虽然我没有添加一个独特的检测，但可能会在某一天得到。

Answer 5

迅速从控制台列表类（忽略 'NG-*' 角类）

(global => { 
 
    // get all elements 
 
    const elements = document.getElementsByTagName('*'); 
 
    // add only unique classes 
 
    const unique = (list, x) => { 
 
     x != '' && list.indexOf(x) === -1 && x.indexOf('ng-') !== 0 && list.push(x);      
 
     return list; 
 
    }; 
 
    // trim 
 
    const trim = (x) => x.trim(); 
 
    // add to variable 
 
    global.allClasses = [].reduce.call(elements, (acc, e) => e.className.split(' ').map(trim).reduce(unique, acc), []).sort(); 
 
    console.log(window.allClasses); 
 
})(window);