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,

<div class="name">
  <div class="first"></div>
  <div class="last"></div>
</div>

would have output name, first, last or name, name > first, name > last. Here, I am concerned about finding all class selectors first. Nesting could be optional.

I expect to use Javascript or Regular Expressions.

Answer 1

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 = [...new Set([].concat(...[...document.querySelectorAll('*')].map(elt => [...elt.classList])))];

Answer 2

Simple ES10 new Set() approach

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

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.