Finding All Class Names Used In Html/dom

Question

How can I get a list of all class names used inside an HTML Snippet? For example, the HTML Snippet below,

Solution 1:

Get all the elements in the document using querySelectorAll, then loop through them, getting each one's class, breaking it apart on spaces, and adding new ones to an allClasses array:

var allClasses = [];

var allElements = document.querySelectorAll('*');

for (var i = 0; i < allElements.length; i++) {
  var classes = allElements[i].className.toString().split(/\s+/);
  for (var j = 0; j < classes.length; j++) {
    var cls = classes[j];
    if (cls && allClasses.indexOf(cls) === -1)
      allClasses.push(cls);
  }
}

console.log(allClasses);

<divclass="foo"><divclass="bar baz"></div></div>

To get the classnames in only one part of the document, specify that in the querySelectorAll call:

var allElements = document.getElementById('my-elt').querySelectorAll('*');

Modern approach

Using ES6, we can write this more functionally as:

[].concat(                            // concatenate
  ...[...                             // an array ofdocument.querySelectorAll('*')    // all elements
  ] .
    map(                              // mapping each elt =>// element
        [...                          // to the array of
          elt.classList// its classes
        ]
    )
);

Or, as a one liner:

[].concat(...[...document.querySelectorAll('*')].map(elt => [...elt.classList]));

Then you will want to apply uniq to the result. You can write that yourself, or use Underscore's _.uniq etc. Here's a simple one for use here:

functionunique(array) {
  var prev;
  returnarray.sort().filter(e => e !== prev && (prev = e));
}

Solution 2:

Simple ES10 new Set() approach

const allClasses = Array.from(document.querySelectorAll('[class]')).flatMap(e => e.className.toString().split(/\s+/))
const classes = newSet()

allClasses.forEach(c => classes.add(c))

console.log(classes)

Get all the class names and split on space so for example, "child first" would become 'child' and 'first'. If you don't like this behaviour you can remove the toString and split functions.

Then add every class name to the set. There is no need to check for duplicates since the set does that for us. If you do want to store duplicates you can use a Map instead.

Solution 3:

Piggybacking off of the one-liner from @user1679669 and @Nermin's answer using Set, you can get a list of all the classes on a page with this one-liner:

const allClasses = [...newSet([].concat(...[...document.querySelectorAll('*')].map(elt => [...elt.classList])))];

Solution 4:

A one-liner that returns unique class names in alphabetical order, the query part based on @torazaburo's answer:

[].concat(...[...document.querySelectorAll('*')].map(e=>[...e.classList])).filter((d,i,a)=>a.indexOf(d)==i).sort()

Solution 5:

I'd do something like the snippet below, it uses jQuery but that's just easier to read imo, a Javascript version wouldn't be much harder I'd assume.

Basically you want to get all of the nodes, then add all of the unique classes to a list..

This is much harder to implement if you're looking for dynamic classes which may be applied with Javascript.

Nesting would require more insight as to how it should be performed, how to handle dupe classes but not dupe class arrays and similar..

If this get's downvoted because of the jQuery I'll be upset.

var classes = [];

$('body *:not(script)').each(function(){
  _classes = $(this).attr('class') ? $(this).attr('class').split(' ') : []
  _classes.forEach(function(entry){
    if(classes.indexOf(entry) < 0){
      classes.push(entry)
    }
  })
})

console.log(classes)

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="dog"></div><spanclass="dog cat"></span><div></div><blockquoteclass="bird"></blockquote>

Html5 Academy