Detailed explanation of using new methods of html5 to manipulate element class names in JavaScript

Earlier, JavaScript was not very convenient to process, as it was necessary to first obtain the class attribute and then process the string.

Now html5 adds classList attribute to all elements to manipulate class attributes, which is very convenient.

1. classList attribute

First look at the following code:

<ul class="nav">

    <li class="active">Column 1</li>

    <li>Column 2</li>

    <li>Column 3</li>

</ul>

<script type="text/javascript">

    // Get the current li element let activeLi = document.querySelector(".active");

    // Print classList attribute console.log(activeLi.classList)

    // Console output:

    // DOMTokenList ['active', value: 'active']

</script>

Console view effect:

classList attribute type:

classList attribute is of DOMTokenList type, and the class attributes can be operated through methods such as add , contains , and remove .

• add(value) adds a new class name.
• contains(value) Whether it contains the class name.
• remove(value) deletes the class name.
• toggle(value) If the class name exists, remove it, otherwise add it.

2. Practical Application

In practice, column switching is a very common application. Continuing with the above example, when clicking a column, move active to the corresponding column

<ul class="nav">

    <li class="item active">Column 1</li>

    <li class="item">Column 2</li>

    <li class="item">Column 3</li>

</ul>

 

<script type="text/javascript">

    let currentElement = document.querySelector(".nav").firstElementChild;

    // Traverse the li elements and set the click event while (currentElement) {

        currentElement.onclick = function() {

            // Remove the active li

            document.querySelector(".active").classList.remove("active");

            // The current li class adds active

            this.classList.add("active");

        }

        currentElement = currentElement.nextElementSibling;

    }

</script>

This makes it very convenient to implement without affecting other class names.

This is the end of this article about the detailed explanation of how to use the new method of html5 to operate element class names in JavaScript . For more relevant content about how to use the new method of html5 to operate element class names in JavaScript , please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!