How to get classes that are not repeated from a Nodelist?

Question

How to get classes that are not repeated from a Nodelist?

Navigation

#1 by (2 votes)

1

Hi, I would like to know how I can with PURO Javascript to obtain names of CSS classes and be able to show them in the console without repeating names from a list of nodes where I obtain the elements looking for the first class. Elements with class AAA always have 2 classes only: AAA and another class that varies and repeats: With this function I see the classes but repeated:

[].forEach.call(document.querySelectorAll('.AAA'), function(elem) {
    console.log(elem.className);
});


<span class"AAA BBB"></span>
<span class"AAA CCC"></span>
<span class"AAA DDD"></span>
<span class"AAA EEE"></span>
<span class"AAA FFF"></span>
<span class"AAA GGG"></span>
<span class"AAA BBB"></span>
<span class"AAA CCC"></span>
<span class"AAA DDD"></span>
<span class"AAA EEE"></span>
<span class"AAA FFF"></span>
<span class"AAA GGG"></span>

I would like to be able to see all types of classes in the console after obtaining all the elements with the class "AAA", that is something like this:

BBB CCC DDD EEE FFF GGG

Neither do I care if both are shown as AAA BBB, AAA CCC, etc.

Thank you very much.

javascript css3 class selectores

asked by Daniel Martinez 17.11.2018 в 17:44

source

1 answer

Trigger insert, update Error handling in Angular

score 2 · Accepted Answer

so I understand it would be something like that (assuming AAA always goes first):

let arr = [...document.getElementsByClassName("AAA")].map((element) => {
  let tempArr = element.className.split(' ') // separamos las classes del array
  tempArr.shift() // quitamos el primer elemento
  return tempArr // retornamos los demas elementos
})
arr =[].concat(...arr) // unimos todos los arrays en uno solo
console.log([...new Set(arr)]) // Generamos el array con valores únicos y lo escribimos

<span class="AAA BBB"></span>
<span class="AAA CCC"></span>
<span class="AAA DDD"></span>
<span class="AAA EEE"></span>
<span class="AAA FFF"></span>
<span class="AAA GGG"></span>
<span class="AAA BBB"></span>
<span class="AAA CCC"></span>
<span class="AAA DDD"></span>
<span class="AAA EEE"></span>
<span class="AAA FFF"></span>
<span class="AAA GGG"></span>