DOM：标签的classList属性

标签的classList属性，一看这个名字就是操作class类的。

这样，在className基础上，有多了一个可以操作类的方式。以前看书看的不够深入，了解的不多 !!!-_-，今天一个同学做日历作业用到了这个方法。遂看了看相关资料。记录下学习心得，新技能 get+1 。

看来，人是需要相互学习的~

废话不多，直接上内容。

标签的classList 主要用于在元素中添加，移除及切换 CSS 类。

这个在项目中太实用了。以前写jQuery的时候，对类名的操作主要依赖的就是jQuery的addClass() 和 removeClass()，以及 hasClass() 方法。现在原生态JS也支持了类似的操作，简直赞的不能再赞了~

1、classList的属性，length，返回标签类的数量。只读，不可更改值。

<div class="c1 c2 c3" id="mydiv">
    这个是demo
</div>
<script>
    let mydiv = document.getElementById("mydiv");
    console.info( mydiv.classList.length );  // 3
</script>

2、add(class1, class2, ...)  在元素中添加一个或多个类名。如果指定的类名已存在，则不会添加。

<div class="c1 c2 c3" id="mydiv">
    这个是demo
</div>
<script>
    let mydiv = document.getElementById("mydiv");
    mydiv.classList.add( "c4","c3" );  // c3 已经存在，不会重复添加
    console.info( mydiv.classList.length );  // 4
</script>

3、remove(class1, class2, ...)    移除元素中一个或多个类名。注意： 移除不存在的类名，不会报错。简直太赞了，乱移除类，也不怕~

<div class="c1 c2 c3" id="mydiv">
    这个是demo
</div>
<script>
    let mydiv = document.getElementById("mydiv");
    mydiv.classList.remove( "c4","c3" );  // c4 不存在，不会报错
    console.info( mydiv.classList.length );  // 2
</script>

4、contains(class)    返回布尔值，判断指定的类名是否存在。

可能值：true - 元素包已经包含了该类名        false - 元素中不存在该类名

<div class="c1 c2 c3" id="mydiv">
    这个是demo
</div>
<script>
    let mydiv = document.getElementById("mydiv");
    if( mydiv.classList.contains("c5") ){
        console.info("包含C5");
    }else{
        console.info("不包含C5");
    }
</script>

5、toggle(class, true|false)    在元素中切换类名。

第一个参数为要在元素中移除的类名，并返回 false；如果该类名不存在则会在元素中添加类名，并返回 true。 

第二个是可选参数，是个布尔值用于设置元素是否强制添加或移除类，不管该类名是否存在。true 添加，false 删除。

<div class="c1 c2 c3" id="mydiv">
    这个是demo
</div>
<script>
    let mydiv = document.getElementById("mydiv");
     mydiv.classList.toggle("c1");  //  存在c1，会移除它
     console.info( mydiv.classList.value ); // c2 c3
</script>

<div class="c1 c2 c3" id="mydiv">
    这个是demo
</div>
<script>
    let mydiv = document.getElementById("mydiv");
     mydiv.classList.toggle("c1",true);  // 强制添加，虽然c1存在，也不会删除它
     console.info( mydiv.classList.value ); // c1 c2 c3
</script>

注意：有无第二个参数，执行结果差异很大~！

6、item(index)   返回元素中索引值对应的类名。索引值从 0 开始。

<div class="c1 c2 c3" id="mydiv">
    这个是demo
</div>
<script>
    let mydiv = document.getElementById("mydiv");
     console.info( mydiv.classList.item(0) ); // c1
</script>

caniuse.com上面的 兼容性数据。看来IE很蛋疼。IE其实只是不支持SVG标签的操作，add，remove的多参数操作，以及toggle的第二参数等。不过IE用的少，具体使用的时候能用classList就用，做好测试。是在不能用想其他方法替代，比如jQuery。