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

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!

You may also be interested in:
  • JavaScript operation element examples
  • Detailed explanation of JavaScript WebAPI, DOM, events and operation element examples
  • js operates two json arrays to merge, remove duplicates, and delete a certain element
  • vue.js click event gets the operation of the current element object
  • JavaScript HTML DOM element (node) add, edit, delete operation example analysis
  • JS document form form element operation complete example
  • Summary of common methods of JavaScript operation elements
  • JavaScript operation elements teach you how to change the page content style

<<:  Detailed explanation of some commonly used font-size font units and line-height in CSS

>>:  The spacing between multiple divs with inline-block is different from the programming method

Recommend

How to configure SSL for koa2 service

I. Introduction 1: SSL Certificate My domain name...

Vue realizes the sliding cross effect of the ball

This article example shares the specific code of ...

HTML tag default style arrangement

html, address,blockquote,body, dd, div,dl, dt, fie...

How to prevent hyperlink redirection using JavaScript (multiple ways of writing)

Through JavaScript, we can prevent hyperlinks fro...

Learn asynchronous programming in nodejs in one article

Table of Contents Introduction Synchronous Asynch...

How to install and uninstall open-vswitch in Linux

1. Compile and install ovs from source code: Inst...

MySQL's method of dealing with duplicate data (preventing and deleting)

Some MySQL tables may contain duplicate records. ...

Why Google and Facebook don't use Docker

The reason for writing this article is that I wan...

Analyze the selection problem of storing time and date types in MySQL

In general applications, we use timestamp, dateti...

Common pitfalls of using React Hooks

React Hooks is a new feature introduced in React ...

XHTML Basic 1.1, a mobile web markup language recommended by W3C

W3C recently released two standards, namely "...

How to elegantly implement WeChat authorized login in Vue3 project

Table of contents Preface Prepare Implementation ...