DOM：标签的classList属性

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

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

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

废话不多，直接上内容。

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

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

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

    这个是demo

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

    这个是demo

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

    这个是demo

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

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

    这个是demo

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

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

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

    这个是demo

    这个是demo

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

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

    这个是demo

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