Add class name in different li by pure in JavaScript?

Javascript Web Development Front End Technology

A class serves as a model for building objects. Code is used to encapsulate data, so that it can be worked on. Although JS classes are based on prototypes, they also have some unique syntax and semantics that are not shared by ES5 classes.

Let’s dive into the article to learn more about how to add class name in different li by pure in JavaScript. To add class, use forEach() along with classList.add().

The forEach() in JavaScript

For each entry in an array, the forEach() method invokes a different function. When dealing with empty elements, this method is not used. Any operation may be carried out on the elements of the given array by the given function.

Syntax

Following is the syntax for forEach()

array.forEach(function(currentValue, index, arr), thisValue)

classList.add() in JavaScript

A DOMTokenList object serving as the value of the class elements is represented by the classList attribute. Although it is a read-only property, we can change its value by fiddling with the program's classes. The element can have one or more classes added to it using the classList.add() method.

Syntax

Following is the syntax for classList.add()

element.classList

For getting better understanding on adding class name in different li by pure in JavaScript.

Example

In the following example we are running the script to add class name in different li.

<!DOCTYPE html>
<html>
   <style>
      .color1 {
         color: #85C1E9 ;
      }
      .color2 {
         color: #F1C40F ;
      }
   </style>
<body>
   <ul>
      <li>MSD</li>
      <li>SKY</li>
      <li>ABD</li>
   </ul>
   <script>
      addClass();
      function addClass() {
         const list = document.querySelectorAll('li');
         list.forEach(function(task, index) {
            if (index === 0) {
               task.classList.add('color1');
            } else if (index === 2) {
               task.classList.add('color2');
            }
         });
      }
   </script>
</body>
</html>

When the script gets executed, it will generate an output consisting of a list where items are added differently with styled CSS, which acts as a class added by using the classList.add() method on the web-browser.

Example

In the following example where we are using document.querySelector('li:nth-oftype()') for a single element to update class.

<!DOCTYPE html>
<html>
   <style>
      .color1 {
         color: #BB8FCE ;
      }
      .color2 {
         color: #EC7063 ;
      }
   </style>
<body>
   <ul>
      <li>SUPERMAN</li>
      <li>SPIDERMAN</li>
      <li>BATMAN</li>
   </ul>
   <script>
      addClass();
      function addClass() {
         const firstLi = document.querySelector('li:nth-of-type(1)');
         firstLi.classList.add('color1');
         const secondLi = document.querySelector('li:nth-of-type(2)');
         secondLi.classList.add('color2');
      }
   </script>
</body>
</html>

On running the above script, the output window will pop up, displaying the list, where some are highlighted with CSS, which acts as a class as the event gets triggered when the user runs the script on the webpage.

Example

Let’s consider another example where we can use firtElementChild and nextElementSibbling.

<!DOCTYPE html>
<html>
   <style>
      .color1 {
         color: #DFFF00 ;
      }
      .color2 {
         color: #CCCCFF ;
      }
   </style>
<body>
   <ul id="list">
      <li>JACK</li>
      <li>ROSE</li>
      <li>SPARROW</li>
   </ul>
   <script>
      function addClass()
      {
         const list = document.getElementById("list");
         list.firstElementChild.classList.add("color1");
         list.firstElementChild.nextElementSibling.classList.add("color2");
      }
      addClass();
   </script>
</body>
</html>

When the script gets executed, the event gets triggered and displays a list along with some styles that are applied with CSS as the events make them act as a class that are added differently in the list on the webpage.