classList总结

楔子

最近在看JavaScript高程设计，越看越觉得JS真的博大精深，每读一次都会有新的收获。今天我们就来说一说classList这个API。

前言

JS操作元素类名的API最熟悉的莫过于className，常规用法如下

<div id=“box1”></div>
<script>
       var box1 = document.getElementById("box1");
       box1.onclick = function(){
             this.className = "warn";     
       }
<script>

相信类似这样的写法大家肯定很常见，但是className的弊端很明显，假如元素有多个类名，我想要移除其中一个怎么办？

<div class="box warn noBorder" id="box1"></div>

如果我想移除.box类，如何写？简单

<script>
       box1.className = "warn noBorder"; 
</script>

事实上，复杂的地方在于很多时候你并不知道元素真正类名有多少，而且也不可能每次都手写这么多类名组成的字符串。
当然你也可以通过以下代码部署：

var className = box1.className.split(/\s+/);//将className字符串分割成数组
var  pos = -1,
       len = className.length;
for(var i = 0;i < len;i++){
      if(className[i]  === "warn"){
              pos = i;
      }
}
className.splice(i,1);//从数组中移除该项
box1.className = className.join(" ");//将数组转换成字符串             

很麻烦是不是？还好JQ封装了2个方法，addClass()和removeClass()。利用这2个方法，你可以直接给元素添加/移除类名，这也可以看出JQ流行的原因。
但是为了这么个简单的问题你要我引入JQ库？ok，猪脚登场。

classList

classList,简单来说，就是为了增加/切换/移除 class类新增的API。返回的是元素的类名。本质上是DOMTokenList.

关于DOMTokenList

这里引用 mozilla MDN上的一段话：

The DOMTokenList interface represents a set of space-separated tokens. Such a set is returned by Element.classList, HTMLLinkElement.relList, HTMLAnchorElement.relList or HTMLAreaElement.relList. It is indexed beginning with 0 as with JavaScript Array objects. DOMTokenList is always case-sensitive.

翻译过来就是：

DOMTokenList这种类型表示一组空间分隔的标记。通常由HTMLElement.classList, HTMLLinkElement.relList, HTMLAnchorElement.relList或HTMLAreaElement.relList返回。从0开始的类JavaScript数组索引。DOMTokenList始终是区分大小写的。

也就是说 classList relList都属于DOMTokenList.

兼容性

来看下classList的兼容性。

classList兼容性.png
这里需要说明下，IE10也是兼容classList的，只不过同IE11一样，add/remove方法不支持多参数处理。默认只会处理第一个参数

属性

• length属性
  返回的是元素类名的长度，只读
• value属性
  返回元素类名的字符串形式

方法

• add()
  添加类名，支持多个类名添加。IE10/IE11不支持多参数

box1.classList.add("warn","error","tips");

• remove()
  移除类名，支持多个类名移除。IE10/IE11不支持多参数

box1.classList.remove("box","warn","noBorder");

• contains()
  参数为字符串，如果元素有该类名返回true,没有则返回false

• toggle()
  类名切换，如果原来有该类名则移除；如果没有则添加。

简单应用

一个div元素，点击添加某样式，再点击移除该样式。

var Odiv = document.getElementById("box1");
    Odiv.onclick = function(){
           this.classList.toggle("styleName");
    }

好了，classList介绍到这，滚去看红皮书咯。