classList in JavaScript

Have you ever wondered how websites seamlessly transform with each button click, smoothly animate transitions, or dynamically adjust styles based on user interactions? The answer lies in a simple yet powerful feature: the classList property in JavaScript

In this article, we’ll be diving into a fundamental concept of JavaScript that can significantly enhance your front-end development skills: the classList property.

Understanding the Basic

When it comes to building appealing web experiences, styling is a crucial element. And that’s where CSS classes come into play. Classes allow us to apply predefined styles to multiple elements effortlessly. But imagine if we could dynamically manage those styles using JavaScript? This is exactly where the classList property comes into play.

`add`

The add() method of the classList property in JavaScript is used to add one or more CSS classes to an HTML element. This method allows you to dynamically apply classes to an element, which can change its styling or behavior on the webpage.

element.classList.add("bold", "italic", ...)
//add two classes to elememt

Note->classList.add() method allows you to add classes to elements, the styles associated with those classes should be defined in your CSS.

`remove`

Sometimes you need to remove a class from the element’s list of classes when it is no longer in use. This is luckily very easy to do with classList.The remove method in the classList property of a JavaScript element allows you to remove a specific CSS class from that element's list of classes.

element.classList.remove("bold")
//removes class named bold

`contains`

At times, you might want to find out if an element has a particular class in JavaScript, so you can do something specific based on that. Fortunately, checking for a class using the classList property is quite straightforward.

Simply use the contains method and provide the class name you want to check. When you use this method, it will give you a "true" response if the element has that class, and a "false" response if it doesn't.

console.log(element.classList.contains("bold"))
// true

`toggle`

All the actions performed up to this point can be summarised and accomplished using the toggle method alone.

 element.classList.toggle("bold")
//this will add bold class if not present and remove it if it is present.

The above is the same as the below.

if (element.classList.contains("bold")) {
  element.classList.remove("bold")
} else {
  element.classList.add("bold")
}

However, situations may arise where you want more detailed control. For example:

• If you need to ensure a class is always added regardless of its current state, you would use add.
• If you need to ensure a class is always removed regardless of its current state, you would use remove.
• If you only want to check if a class is present without changing its state, you would use contains.

`forEach`

forEach method helps you iterate through each of the classes and do something special with them, one after the other.

const element = document.getElementById('myDiv');
element.classList.add("bold", "italic")
element.classList.forEach(className => {
  console.log(className)
})

//output= bold italic

`length` and `item`

length property is used to determine the number of classes associated with a particular HTML element. It provides you with the count of classes in the element's class list.

item method allows you to retrieve a specific class from an element's list of classes using its index.

<div id="myDiv" class="bold italic special">This is a div</div>

const myDiv = document.getElementById('myDiv');

// Get the number of classes in the class list
const classCount = myDiv.classList.length;

// Loop through all the classes using item and length
for (let i = 0; i < classCount; i++) {
    const currentClass = myDiv.classList.item(i);
    console.log(`Class at index ${i}: ${currentClass}`);
}

//output Class at index 0: bold
// Class at index 1: italic
// Class at index 2:special

Conclusion

In a nutshell, that wraps up our exploration of classList in JavaScript. While all of these might not be useful in every project, having this toolbox at your disposal will make your code tidier and easier to manage. So, armed with this knowledge, go forth and craft web wonders with cleaner and more dynamic designs! Happy coding !