How to get a list of Css class usage in HTML file?

Question

I need a list of classes used in an html file. Is there any tool where I can get a list of classes in an HTML file?

Answer 1

this should work and it doesn't need 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 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(' ')); 

more functional approach

 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

If you have jQuery on the page, run this code:

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

The classArray variable will contain all the classes specified on this HTML page.

Answer 3

Take a look at the dust selector.

This is not quite what you are looking for; it shows a list of UNATED selectors. However, I think you could use the inverse of the list that it provides.

Here is the link: http://www.sitepoint.com/dustmeselectors/

Answer 4

I know this is an old question, but it got here through Google, so I suspect more people can get here too.

The shortest way using querySelectorAll and classList (which means browser support can be a problem: IE10 for classList and IE8 for querySelectorAll ) and with duplicates:

 var classes = 0, elements = document.querySelectorAll('*'); for (var i = 0; i < elements.length; i++) { classes = classes + elements[i].classList.length; } 

I made a jsFiddle with a digression for classList (which has the "lowest" browser support), which also takes into account all elements, all classes and all elements with classes if you are not using classList .

I did not add a unique discovery, although I could have reached it one day.

Answer 5

Quickly list classes from the console (ignoring angular "ng- *" classes)

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