关于classList的一点记录

如果现在要判断元素的某个class是否存在，在以前的时候，要用正则表达式做匹配，代码上可能比较麻烦一些，闲杂用classList，方便了很多！

MDN上classList的定义

classList 属性返回元素的类名，作为 DOMTokenList 对象。

该属性用于在元素中添加，移除及切换 CSS 类。

classList 属性是只读的，但你可以使用 add() 和 remove() 方法修改它。

<div class="div1 div2 div3" id="div">test</div>
<script>
    var list=document.getElementById('div');
    console.log(list.classList);
</script>

结果如下：

1. DOMTokenList(3) ["div1", "div2", "div3", value: "div1 div2 div3"]
   1. 0:"div1"
   2. 1:"div2"
   3. 2:"div3"
   4. length:3
   5. value:"div1 div2 div3"
   6. __proto__:DOMTokenList

classList的一些API：

document.body.classList.length;//静态属性。获取元素类名的个数

document.body.classList.add('class_a，class_b,class_c');//方法。用于添加元素的类(class_a)，接受多个参数，

document.body.classList.remove('class_a');//方法。用于删除元素的类（class_a），接受多个参数。和add一样

document.body.classList.contains('class_a'); //返回true或者false  方法。用于检测元素是否包含某个类（class_a），返回Boolean值。

//toggle
//方法。这个家伙是add、remove、contains的结合，不仅能检测元素是否包含某个类，而且还具备增删功能，即如果存在某个类，
// 就remove掉，如果不存在，就add一下。返回一个Boolean值。

//如果body不存在 class_a 的类名，就会给body增加一个 class_a 的类

document.body.classList.toggle('class_a'); //true

//再执行一遍，class_a已被删除了

document.body.classList.toggle('class_a'); //false