Let's suppose we have the following HTML element:
<div id="example" class="foo-bar baz"></div>
To check whether a certain class exists on the element, we can use any of the following methods:
#Using Element.classList.contains()
Using Element.classList
returns a live DOMTokenList
. This means that we can use DOMTokenList.contains()
method to check whether the Element.classList
contains a certain class name or not. For example:
const elem = document.getElementById('example');
console.log(elem.classList.contains('foo-bar')); // output: true
console.log(elem.classList.contains('baz')); // output: true
console.log(elem.classList.contains('foo')); // output: false
console.log(elem.classList.contains('non-existent')); // output: false
Since, Element.classList
is "live" it means that any classes added to it dynamically will also be taken into account.
To support Element.classList
on old browsers you can use a polyfill (such as the one on MDN).
#Using Element.matches()
The matches()
method can be used to check if the element itself would be selected by the provided selector or not; accordingly it returns a boolean true
or false
. To use this method to check if a class name exists on an element itself, you can do the following:
const elem = document.getElementById('example');
console.log(elem.matches('.foo-bar')); // output: true
console.log(elem.matches('.baz')); // output: true
console.log(elem.matches('.foo')); // output: false
console.log(elem.matches('.non-existent')); // output: false
#Using String.prototype.split()
Using split()
, you can convert the space-separated list of classes (that you get via the Element.className
property) into an array. After that you can use Array.prototype.includes()
(or Array.prototype.indexOf()
) to check if the resulting array contains the specified class name. For example:
const elem = document.getElementById('example');
const classNamesArr = elem.className.split(/\s/);
console.log(classNamesArr); // output: ['foo-bar', 'baz']
console.log(classNamesArr.includes('foo-bar')); // true
console.log(classNamesArr.includes('baz')); // true
console.log(classNamesArr.includes('foo')); // output: false
console.log(classNamesArr.includes('non-existent')); // output: false
#Using a Regular Expression With RegExp.prototype.test()
You can use the following regular expression to check whether a class name exists or not in a string of class names (returned by the Element.className
property):
const elem = document.getElementById('example');
const classNames = elem.className;
console.log(classNames); // output: 'foo-bar baz'
console.log(/(^|\s)foo-bar(\s|$)/.test(classNames)); // true
console.log(/(^|\s)baz(\s|$)/.test(classNames)); // true
console.log(/(^|\s)foo(\s|$)/.test(classNames)); // output: false
console.log(/(^|\s)non-existent(\s|$)/.test(classNames)); // output: false
The regular expression checks whether the class name starts-with, ends-with, and/or has a space character preceeding or following the class name. This helps ensure, false positives such as "foo
" returning true
for "foo-bar
" does not happen.
This post was published by Daniyal Hamid. Daniyal currently works as the Head of Engineering in Germany and has 20+ years of experience in software engineering, design and marketing. Please show your love and support by sharing this post.