I need list of classes used in an html file. Is there any tool where i can get list of classes in the HTML file?
-
1Do you need just list of class names, or values also?Milan– Milan2011-09-24 10:44:57 +00:00Commented Sep 24, 2011 at 10:44
-
I need class name which use in the HTML like what ever class i apply to control or any other container.KuldipMCA– KuldipMCA2011-09-24 12:35:20 +00:00Commented Sep 24, 2011 at 12:35
Add a comment
|
6 Answers
This should work and it doesn't need jquery:
const used = new Set();
const elements = document.getElementsByTagName('*');
for (let { className = '' } of elements) {
for (let name of className.split(' ')) {
if (name) {
used.add(name);
}
}
}
console.log(used.values());
2 Comments
shershen
had to update it a bit - because it fails with "elements[i].className.split(' ')" - is not a function. here is the updated code - jsfiddle.net/dqad4n90
Matthew Wolman
updated to fix the es6 solution. Had a reference to an undefined variable seen
seen.add(name). It was supposed to be used.add(name). Elegant solution though, really good stuff.If you've got jQuery on the page, run this code:
var classArray = [];
$('*').each(function(){if(this.className!=""){classArray.push(this.className)}})
The variable classArray will contain all the classes specified on that HTML page.
2 Comments
Ilia Choly
you're going to have duplicates in your result.
shershen
tagnames and IDs are in the list
Pure Javascript Code will list all the unique classes.
var lst=[];
document.querySelectorAll("[class]").forEach( (e)=>{
e.getAttribute("class").split(" ").forEach( (cls)=>{if( cls.length>0 && lst.indexOf(cls)<0) lst.push(cls);}
);
});
console.log(lst.sort());
Comments
Take a look at Dust Me Selectors.
It's not exactly what you are looking for, it shows a list of UNused selectors. However, I imagine you could use the inverse of the list it provides.
Here is the link: http://www.sitepoint.com/dustmeselectors/
1 Comment
Bojangles
Looks like a good extension, however it's only talking about FF3.5 support! We're now at Firefox "6.0" (4.0 with 2 bugfix releases).
I know this is an old question, but got here through google so I suspect more people can get here too.
The shortest way, using querySelectorAll and classList (which means, browser support could be an issue: IE10 for classList and IE8 for querySelectorAll ), and with duplicates, would be:
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 fallback for classList (which has the "lowest" browser support) that also counts all elements, all classes and all elements with classes if you're not using classList.
I didn't add a unique detection though, might get to it some day.
1 Comment
Eric Hepperle - CodeSlayer2010
Thanks! Nice for a recent solution. Plain vanilla JavaScript --> Doesn't require jQuery.
Quickly list classes from console (ignoring 'ng-*' angular 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);