Come ottenere l'elenco delle classi Css utilizzate nel file HTML?

Question

Ho bisogno di un elenco di classi utilizzate in un file html. C'è qualche strumento in cui posso ottenere l'elenco delle classi nel file HTML?

Answer 1

questo dovrebbe funzionare e non ha bisogno di 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(' ')); 

approccio più funzionale

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

Dai un'occhiata a Dust Me Selectors.

Non è esattamente quello che stai cercando, mostra un elenco di selettori non utilizzati. Tuttavia, immagino che potresti usare l'inverso della lista che fornisce.

Ecco il link: http://www.sitepoint.com/dustmeselectors/

Answer 3

Se hai jQuery nella pagina, eseguire questo codice:

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

La variabile classArray conterrà tutte le classi indicate in quella pagina HTML.

Answer 4

So che questa è una vecchia questione, ma arrivato tramite Google così ho il sospetto che più persone possono ottenere anche qui.

La via più breve, usando querySelectorAll e classList (che significa, il supporto del browser potrebbe essere un problema: IE10 for classList e IE8 for querySelectorAll), e con i duplicati, sarebbe:

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 un ripiego per classList (che ha il "browser" più basso) che conta anche tutti gli elementi, tutte le classi e tutti gli elementi con le classi se non stai usando classList.

Non ho aggiunto un rilevamento univoco, potrei arrivarci un giorno.

Answer 5

rapidamente le classi di elenco da console (ignorando '* ñg-' classi angolari)

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