¿Cómo obtener la lista del uso de la clase Css en el archivo HTML?

Question

Necesito la lista de clases utilizadas en un archivo html. ¿Hay alguna herramienta donde pueda obtener una lista de clases en el archivo HTML?

Answer 1

esto debería funcionar y no necesita 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(' ')); 

enfoque más funcional

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

Eche un vistazo a los selectores de polvo.

No es exactamente lo que está buscando, muestra una lista de selectores no utilizados. Sin embargo, imagino que podrías usar el inverso de la lista que proporciona.

Aquí está el enlace: http://www.sitepoint.com/dustmeselectors/

Answer 3

Si tienes jQuery en la página, ejecute este código:

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

La variable classArray contendrá todas las clases especificadas en esa página HTML.

Answer 4

Sé que esto es una vieja pregunta, pero tengo aquí a través de Google así que sospecho que más gente pueda llegar aquí también.

El camino más corto, utilizando querySelectorAll y classList (lo que significa, visualización podría ser un problema: IE10 for classList y IE8 for querySelectorAll), y con duplicados, sería:

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

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

I made a jsFiddle con una reserva para classList (que tiene el soporte de navegador "más bajo") que también cuenta todos los elementos, todas las clases y todos los elementos con clases si no está usando classList.

No agregué una detección única, aunque podría llegar algún día.

Answer 5

Rápidamente clases de lista de consola (ignorando las clases angulares '*') ñg-

(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);