Get CSS Class Name(s) Of An HTML Element Using JavaScript

Learn how to get one or more CSS class names of an HTML element in JavaScript.

1. Get Class Names Using classList
2. Get Class Names Using getAttribute()
3. Get Class Names Using className
4. Get Class Name By its Index
5. Get Class Name If it exists
6. Get Class Names as a List

1. Get Class Names Using classList

Here is a simple div element that has two attributes: class and id.

<div class="shape orange" id="box">box</div>

Let’s see how to get the class names shape and orange of an element using the classList property.

First, get a DOM reference of an element using the getElementById() method on the document object.

The getElementById() method returns the div element object.

You can also use getElementsByClassName(), getElementsByTagName(), getElementsByName() to get DOM reference of one or more elements.

Assign it to a constant box.

Now, you can easily get all the class names by accessing the classList property on the element object.

const box = document.getElementById("box");
console.log(box.classList); // ['shape', 'orange', value: 'shape orange']
console.log(typeof box.classList); //DOMTokenList

It returns DOMTokenList which is an array-type object containing all the class names.

You can access any class name by its index value which is super useful.

2. Get Class Names Using getAttribute() Method

Alternatively, you can also use the getAttribute() method to get one or more class names of an element.

To do that, call the getAttribute() method on the box element object, passing the class name as an argument in quotes.

Unlike, the classList property, the getAttribute() will return a string containing all the class names.

Which is NOT that useful and I would always recommend using classList instead.

const box = document.getElementById("box");
console.log(box.getAttribute("class")); //  "shape orange"
console.log(typeof box.getAttribute("class")); //String

3. Get Class Names Using className Property

Similar to the getAttribute() method, you can also use the className property on the element object to get one or more class names in JavaScript.

Again, it will return the class name as a string type.

const box = document.getElementById("box");
console.log(box.className); //  "shape orange"
console.log(typeof box.className); //String

4. Get Class Name By Index

Sometimes, you may want to get a specific class name of an element by its position.

Here is the simple div element that has three class names: shape, orange and small.

<div class="shape orange small " id="box">box</div>

Let’s say I want to get the third class name small.

const box = document.getElementById("box");
console.log(box.classList); // ['shape', 'orange', 'small', value: 'shape orange small']
console.log(box.classList[2]); // "small"

Using the classList property on the element object, we can easily do that because it will return DOMTokenList which is an array-type object.

Finally, get the class name small by its index number which is 2.

Pretty straightforward.

5. Get Class Name If It Exists

Let’s check to see if a class name exists in an element before accessing it to avoid errors.

<div class="shape orange small" id="box">box</div>

Luckily, classList API has a method called contains() which does exactly that.

The contains() method takes an argument which is the class name that you want to check to see if it exists.

const box = document.getElementById("box");
console.log(box.classList.contains("small")); // true
console.log(box.classList.contains("blue")); // false

If it does, the contains() method returns true, otherwise false.

6. Get Class Names As A-List and Length

What if you want to get all the individual class names of an element in JavaScript?

As you know, the classList property on the element object will return the DOMTokenList which is an array-type object.

Loop through the DOMTokenList object using for…of and get individual class names on each iteration.

const box = document.getElementById("box");
for(const className of box.classList) {
  console.log(className); // 1.shape 2.orange 3.small
}

box.ClassList.length; //3

You may also like:

• ADD Class To An HTML Element Using JavaScript
• CHANGE Class Of An Element
• TOGGLE Class Of An Element
• REMOVE Class Of An Element