Class Management

From Basic to Advanced: Complete DOM Manipulation Course

Sobre a Aula

Let’s now explore the power of class management in the world of style manipulation in DOM. Manipulating classes allows you to modify the style of several elements at once, making it easy to maintain your code. Let’s go straight to the details!

Adding Classes with classList.add

When we want to apply a specific style to an element, we add a class to it. Let us take a simple example:

// Finding the desired item
var myElement = document.getElementById('myElement');

// Adding highlighting class
MyElement.classList.add('highlight');

Now, if we have a class in CSS called.destaque, we can define specific styles for it.

Removing Classes with classList.remove

If we need to remove a class, we use classList.remove:

// Removing class 'oldstyle'
MyElement.classList.remove('oldStyle');

This is useful when you want to replace one style with another.

Switching Classes with classList.toggle

If we want to create a switch to turn on and off a style, we use classList.toggle:

// Switching the 'active' class
MyElement.classList.toggle('active');

This is especially useful for creating features such as theme alternators.

Checking for Class Presence with classList.contains

If we need to check whether an item has a specific class, we use classList.contains:

// Checking if the item has the 'important' class

if (myElement.classList.contains('important')) {
// Do something important here

}

Example to improve understanding

To improve our understanding of the subject, let us create a more comprehensive example. In this example, we will have a list of items that can be highlighted or removed.

When you click on an item, the highlight class will be alternated, providing an interactive experience. Let’s get to the code!

Basic HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Example of Class Management</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

<ul id="myList">
  <li onclick="toggleHighlight(this)">Item 1</li>
  <li onclick="toggleHighlight(this)">Item 2</li>
  <li onclick="toggleHighlight(this)">Item 3</li>
</ul>

<script src="script.js"></script>
</body>
</html>

CSS (styles.css):

.highlight {
  background-color: yellow;
  font-weight: bold;
  cursor: pointer;
}

JavaScript (script.js):

function toggleHighlight(element) {
  // Toggling the 'highlight' class for the clicked element
  element.classList.toggle('highlight');
}

Visualization

Example of Class Management

Item 1
Item 2
Item 3

In this example, each <li> in the list has an onclick event that calls the switch-off function when clicked. The switchDestack function uses classList.toggle to switch the ‘destack’ class for the clicked item.

When you click on an item in the list, you will see an immediate visual change, indicating that the highlighting class has been applied or removed.

Class management is a powerful tool that simplifies style manipulation in DOM. Try these methods in your own code to get a more practical understanding.

In the next module, we will explore DOM events, allowing dynamic interactions with users. Continue firmly on your learning journey!

Siga-me

Entrar na conversa