How to check if an element has multiple classes with vanilla JS

Question

I'm trying to figure out how to write an if statement that works something like this:

if (element contains class 1 && class 2) {
   // do this
}

How do I write that if statement to check for multiple classes?

Is there a way to make the .contains method check for more than one class?

What I've found so far:

How to check class of multiple class elements in javascript, without jquery

Problem is, it seems to be returning an array of all the classes that the element contains, which is not what I want. I need the function to check if the element contains the classes that I am supplying it with.

One of the solutions looks to me like it's asking us to create our own function to do this, but is there a native method on JS which will do the trick?

I'm quite new to this stuff and I really appreciate the patience you guys have shown in answering my questions.

although matches is the answer, if element.classList returns all the classes of an element, how hard is it to compare it to a list of classes you are supplying? it's programming 101. — mpm
– mpm, Commented Sep 13, 2018 at 23:01
You're absolutely right of course, I was just looking to see if there was a quicker way to do it in future since I think I will be using this a good number of times :) — EnterPassword
– EnterPassword, Commented Sep 13, 2018 at 23:17

Pointy · Accepted Answer · 2018-09-13 23:00:52Z

17

You can use the .matches() API on the element, and it's pretty well-supported now:

if (element.matches(".class1.class2")) ...

It's like a built-in version of jQuery .is().

Documentation link.

answered Sep 13, 2018 at 23:00

Pointy

415k62 gold badges600 silver badges631 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

EnterPassword Over a year ago

That's exactly what I was looking for, thank you very much! :)

connexo Over a year ago

Good solution, even though I kind of dislike the need for a string builder here. How does your approach fare with class names containing a .?

Pointy Over a year ago

@connexo I think the API allows them to be quoted with backslash like the jQuery one does, or if not you'd do it the same way as in a CSS file, by using some other sort of escape.

connexo Over a year ago

No need for trickery like that with my approach. Just do [...element.classList].contains('a', 'c.d'), see my answer below. I know modifying built-in objects is risky and questionable, but elegant as well.

Pointy Over a year ago

@connexo there's always more than one way to do something like this in the front-end world :)

|

connexo · Accepted Answer · 2018-09-13 23:50:25Z

Put the class names you want to test for into an array, then use Array.prototype.every() to check if all members of your array exist in the element's classList:

console.log(['a', 'b'].every(e=>div.classList.contains(e)))
console.log(['a', 'b', 'c'].every(e=>div.classList.contains(e)))

<div class="a b" id="div"></div>

Unfortunately Element.classList is read-only, so you cannot add anything to its prototype. You can however do that on the Array.prototype:

Array.prototype.contains = function(...args) { 
  return [...args].every(c=>this.includes(c))
}

console.log([...div.classList].contains('a', 'b'))
console.log([...div.classList].contains('a', 'c'))
console.log([...div.classList].contains('a', 'c.d'))

<div class="a b c.d" id="div"></div>

Important: Please note that this violates the basic OOP rule Do not modify objects you don't own. As such, it would be better to create a named function taking the element and an array with a list of classes to test for.

alee046 · Accepted Answer · 2018-09-13 23:06:13Z

-2

There is a native API for the browser that lets you play with the DOM. jQuery is not always needed. https://www.w3schools.com/jsref/prop_element_classlist.asp.

You can use the 'classList.contains' method

document.getElementById({id}).classList.contains({class}) -- returns true or flase

answered Sep 13, 2018 at 23:06

alee046

8710 bronze badges

3 Comments

connexo Over a year ago

Read again: Is there a way to make the .contains method check for more than one class?

alee046 Over a year ago

my apologies... you can get an array of classes u want to check against and you iterate over it with 'contains' you can this looks like a good example below. stackoverflow.com/questions/6391448/…

Maxime Culea Over a year ago

Then yes it's not answering the question anymore ..

Collectives™ on Stack Overflow

How to check if an element has multiple classes with vanilla JS

3 Answers 3

7 Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related