I faced a problem today, i tooks me hours to just know what it is, so I had an element, this element had many classes :

<div id="myId" class="first second iwantthisone fourth"></div>

I was using a class from the list to pass it as a parameter in an other function, so to get it I was doing this :

 const myClass = document.getElementById('myId').classList[2];

Why did I choose 2 ? because when I was doing a console.log to the classList, it was giving me an array ( not regular array ) and the result was like this :

['first', 'second', 'iwantthisone', 'fourth']

So I thought I have finished, I deployed my work to a server, I went there to test if everything is okay, it was not and that's why I am here, so the problem is that the order of the items in the array changed to this :

['second', 'iwantthisone','first', 'fourth']

So my old code in longer working, I need to do this :

const myClass = document.getElementById('myId').classList[1];

Which is not practical, I need to get the class using a method like filter for array, but it seems like I can't use it because classList is not a regular as I mentionned before.

Any solution ?

ANy help would be much appreciated.

I faced a problem today, i tooks me hours to just know what it is, so I had an element, this element had many classes :

<div id="myId" class="first second iwantthisone fourth"></div>

I was using a class from the list to pass it as a parameter in an other function, so to get it I was doing this :

 const myClass = document.getElementById('myId').classList[2];

Why did I choose 2 ? because when I was doing a console.log to the classList, it was giving me an array ( not regular array ) and the result was like this :

['first', 'second', 'iwantthisone', 'fourth']

So I thought I have finished, I deployed my work to a server, I went there to test if everything is okay, it was not and that's why I am here, so the problem is that the order of the items in the array changed to this :

['second', 'iwantthisone','first', 'fourth']

So my old code in longer working, I need to do this :

const myClass = document.getElementById('myId').classList[1];

Which is not practical, I need to get the class using a method like filter for array, but it seems like I can't use it because classList is not a regular as I mentionned before.

Any solution ?

ANy help would be much appreciated.

• javascript
• arrays
• class

• 4 You should never need to get a class from the classlist at all. If you already know which class you want, why not just write const myClass = 'iwantthisone';? – Bergi Commented Jun 17, 2020 at 21:46
• what you're looking for is data attributes, not class – user120242 Commented Jun 17, 2020 at 21:47
• Bergi : Well, this just an example to show you the problem I have, in reality a Have a list of li, some of them have 'linkClass service', some of them have 'linkClass service activeLink', I needto look for the ones having activeLink for example. – TaouBen Commented Jun 17, 2020 at 21:53
• 1 @TaouBen Or alternatively, select your elements using a document.querySelectorAll('li.activeLink') selector right away – Bergi Commented Jun 17, 2020 at 21:58
• 1 I think he's trying to do something like: myObjWithClassNamesAsKeys[select('.someclass').className] or post the className as an AJAX request variable, which as noted isn't what classes are really made for – user120242 Commented Jun 17, 2020 at 22:00

1 Answer 1

You can use filter as long as you converted it from array using Array.from(). I'm skeptical that this is what youre looking for due to the discussion in the ments but from the question alone, this is the solution.

 const myClassList = document.getElementById('myId').classList;
 var classList = Array.from(myClassList).filter(word => word == "iwantthisone");
 console.log(classList);
 console.log(myClassList);

<div id="myId" class="first second iwantthisone fourth"></div>