要操作类名，可以通过 className 属性实现添加、删除和替换。但 className 是一个字符串， 所以每次操作之后都需要重新设置这个值才能生效，即使只改动了部分字符串也一样。<br />以下面的 HTML 代码为例：

<div class="bd user disabled">...</div>

元素有 3 个类名。要想删除其中一个，就得先把 className 拆开，删除不想要的那个， 再把包含剩余类的字符串设置回去。
比如：

// 要删除"user"类
let targetClass = "user"; 
// 把类名拆成数组
let classNames = div.className.split(/\s+/); 
// 找到要删除类名的索引
let idx = classNames.indexOf(targetClass); 
// 如果有则删除
if (idx > -1) { 
 classNames.splice(i,1); 
} 
// 重新设置类名
div.className = classNames.join(" ");

• 这就是从
  元素的类名中删除”user”类要写的代码。
• 替换类名和检测类名也要涉及同样的算 法。
• 添加类名只涉及字符串拼接，但必须先检查一下以确保不会重复添加相同的类名。
• 很多 JavaScript 库为这些操作实现了便利方法。

---

HTML5 通过给所有元素增加 classList 属性为这些操作提供了更简单也更安全的实现方式。

• classList 是一个新的集合类型 DOMTokenList 的实例。
• 与其他 DOM 集合类型一样，DOMTokenList 也有 length 属性表示自己包含多少项，也可以通过 item()或中括号取得个别的元素。
• 此外， DOMTokenList 还增加了以下方法。

     - add(value)   向类名列表中添加指定的字符串值value。如果这个值已经存在则什么也不做
     - contains(value)   返回布尔值，表示给定的value是否存在
     - remove(value)    从类名列表中删除指定的字符串值value
     - toggle(value)   如果类名列表中已存在指定的value，则删除；如果不存在，则添加
  

---

如此上面的代码就能简化为一行代码：

div.classList.remove("user");

这行代码可以在不影响其他类名的情况下完成删除。其他方法同样极大地简化了操作类名的复杂 性，
如下面的例子所示：

// 删除"disabled"类
div.classList.remove("disabled"); 
// 添加"current"类
div.classList.add("current");
// 切换"user"类
div.classList.toggle("user"); 

// 检测类名 
if (div.classList.contains("bd") && !div.classList.contains("disabled")){ 
 // 执行操作
) 

// 迭代类名
for (let class of div.classList){ 
 doStuff(class); 
}

• 添加了 classList 属性之后，除非是完全删除或完全重写元素的 class 属性，否则 className 属性就用不到了。
• IE10 及以上版本（部分）和其他主流浏览器（完全）实现了 classList 属性。