相关介绍
classList属性是 HTML 元素的一个属性，它保存当前选定元素的类名。您可以使用该属性将 HTML 元素的类名作为数组获取。
可以先获取DOM元素之后再使用classNameorclassList属性获取元素的类名。
className属性以字符串形式返回类名，而属性classList以数组形式返回类名：
const div = document.getElementById("header");
console.log(div.className); // "navbar open"
console.log(div.classList); // ["navbar", "open"]
console.log(div.classList[0]); // "navbar"
console.log(div.classList[1]); // "open"
该classList属性是只读属性。如果要操作 HTML 元素的类，则需要使用classList属性中包含的方法。它们如下：
add()contains()item()remove()toggle()
让我们从方法开始了解这些方法是如何工作的add()。
classList add() 方法解释
该add()方法允许您向元素添加一个或多个类名。您只需要将要添加的类名作为逗号分隔的字符串传递：
<div>下面是向上面的元素添加新类名的示例：
const div = document.getElementById("header");
div.classList.add("expand");
如果类名已经存在于元素上，则不会再次将其添加到元素中。下面的代码什么也不做，因为类名"navbar"已经存在于上面的<div>元素中：
div.classList.add("navbar");
接下来，让我们了解contains()方法的工作原理。
classList contains() 方法解释
该contains()方法将检查元素的class属性并检查它是否包含特定的类名。
您需要将要检查的类名作为其参数传递。true如果类名存在或false不存在，该方法将返回。
例如，以下是检查元素是否"navbar"存在类的方法：
const div = document.getElementById("header");
div.classList.contains("navbar"); // true
div.classList.contains("lg-block"); // false
这就是contains()方法的全部内容。接下来，我们有item()方法。
classList item() 方法解释
classList 属性的item()方法返回您指定为其参数的索引处的类名。它的工作方式与使用classList[index]检查相同，但指定索引不存在时除外：
const div = document.getElementById("header");
console.log(div.classList.item(0)); // "navbar"
console.log(div.classList.item(1)); // "open"
console.log(div.classList.item(2)); // null
console.log(div.classList[0]); // "navbar"
console.log(div.classList[1]); // "open"
console.log(div.classList[2]); // undefined
从上面的代码可以看出，该item()方法返回null，但是当索引不存在时classList[index]检查返回。undefined
接下来，让我们学习remove()方法。
classList remove() 方法解释
该classList.remove()方法允许您从 HTML 元素中删除一个或多个类名。与该add()方法一样，您需要将要删除的类名作为逗号分隔的字符串传递。您可以根据需要传递任意数量的字符串参数：
const div = document.getElementById("header");
// remove three class names
div.classList.remove("navbar", "expand", "lg-block");
当元素的属性中不存在您要删除的类名时class，JavaScript 将继续并尝试删除您传递给方法的下一个类名。
换句话说，删除一个不存在的类不会引发错误。
最后，让我们看看该toggle()方法是如何工作的。
classList toggle() 方法说明
该classList.toggle()方法允许您根据当前class属性值添加或删除类名。
如果要切换的类名已经存在于元素中，则该toggle()方法将删除该类名，反之亦然。
例如，假设您有一个<p>元素如下：
<p id="header" class="red">Hello World! This is a paragraph element.</p>
您可以调用该toggle()方法一次以从元素中删除该类"red"，如下面的代码所示：
const paragraph = document.getElementById("header");
paragraph.classList.toggle("red"); // false
paragraph.classList.toggle("red"); // true
您可以通过它返回的值知道该toggle()方法是否添加或删除了一个类。如果类名被删除，toggle()将返回false. 添加类名后，将返回true.