1.classlist属性

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

这个

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

  1. // 要删除"user"类
  2. let targetClass = "user"; 
  3. // 把类名拆成数组
  4. let classNames = div.className.split(/\s+/); 
  5. // 找到要删除类名的索引
  6. let idx = classNames.indexOf(targetClass); 
  7. // 如果有则删除
  8. if (idx > -1) { 
  9.  classNames.splice(i,1); 
  10. } 
  12. // 重新设置类名
  13. div.className = classNames.join(" ");
  • 这就是从
    元素的类名中删除”user”类要写的代码。
  • 替换类名和检测类名也要涉及同样的算 法。
  • 添加类名只涉及字符串拼接，但必须先检查一下以确保不会重复添加相同的类名。
  • 很多 JavaScript 库为这些操作实现了便利方法。

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

  • classList 是一个新的集合类型 DOMTokenList 的实例。
  • 与其他 DOM 集合类型一样，DOMTokenList 也有 length 属性表示自己包含多少项，也可以通过 item()或中括号取得个别的元素。
  • 此外， DOMTokenList 还增加了以下方法。
    1.    - add(value)   向类名列表中添加指定的字符串值value。如果这个值已经存在则什么也不做
    2.    - contains(value)   返回布尔值，表示给定的value是否存在
    3.    - remove(value)    从类名列表中删除指定的字符串值value
    4.    - toggle(value)   如果类名列表中已存在指定的value，则删除；如果不存在，则添加

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

  1. div.classList.remove("user");

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

  1. // 删除"disabled"类
  2. div.classList.remove("disabled"); 
  3. // 添加"current"类
  4. div.classList.add("current");
  5. // 切换"user"类
  6. div.classList.toggle("user"); 
  8. // 检测类名 
  9. if (div.classList.contains("bd") && !div.classList.contains("disabled")){ 
  10.  // 执行操作
  11. ) 
  13. // 迭代类名
  14. for (let class of div.classList){ 
  15.  doStuff(class); 
  16. }
  • 添加了 classList 属性之后，除非是完全删除或完全重写元素的 class 属性，否则 className 属性就用不到了。
  • IE10 及以上版本（部分）和其他主流浏览器（完全）实现了 classList 属性。