HTML5 中新增了很多 API，简化了 CSS 类的用法。其中包含 getELementsByClassName 方法以及 classList 属性。都不兼容 IE 低版本，但是现在也不需要考虑兼容性了。

这里主要介绍 classList 属性。操作类名，还可以使用 className 属性来完成。

classList

classList 属性是新集合类型 DOMTokenList 的实例。与其他 DOM 集合类似，它有一个 length 属性，表示包含多少元素，而要取得每一个元素，可以使用 item() 方法，也可以使用方括号及索引，也就是说它是一个类数组。

其存储的值为不包含任何空白字符的字符串，且不包含重复的值。

1. length

length 属性表示其包含多少个类名，它不会计算重复的类名。也就是说，重复的类名不会添加到 classList 对象的属性中。

  1. oDiv.classList.length;

需要注意的是，这个属性是只读的，没有办法通过这个属性为元素添加、删除或修改类名。classList 也没有办法通过索引来改变其值。

  1. //=> 以下操作都是无效的，但是不会报错
  2. oDiv.classList.length--;
  3. oDiv.classList.length++;
  4. oDiv.classList.length = 4;
  5. oDiv.classList[length] = 1;
  6. oDiv.classList[0] = 'cc';

2. value

value 属性的初始值就是元素中 class 属性中的字符串。包含空白字符和重复类名。

它的值与 className 属性的值绑定的，相互映射，这个属性的出现，也表示 className 属性就可以完全被取代了。

这个属性是可以读写的，会直接反映到 classList 本身包含的值，也映射到 className 的值

  1. oDiv.classList.value = ' aa';
  2. oDiv.classList; //=> {0:'aa', length: 1, value: ' aa'};
  3. oDiv.className; //=> ' aa'

3. add(className) 添加

将给定的字符串添加到列表中，如果值已经存在，就不添加。它是 DOMTokenList 原型上的方法。

  1. oDiv.classList.add('aa');

需要注意的是，传入的字符串参数，不能包含空格，否则会报错。

  1. oDiv.classList.add('a a');

可以传入多个参数，都会作为类名添加进去。

  1. oDiv.classList.add('a', 'b');

需要注意的是，其反应到 value 属性上，会自动添加空格分隔开，同时，也会把多余的空格去掉

4. remove(className) 移除

从列表中删除给定字符串。

  1. oDiv.classList.remove('a');

与前面的 add 方法一样，可以传入多个参数，且传入的参数中有空格就会报错。其删除后的行为与 add 也是一致的，会去掉 value 属性中多余的空格。多个参数都存在一定兼容性。

5. toggle(className) 切换

这个一个非常便利的方法。如果列表中已经存在给定值，则删除它，如果没有，则添加它。非常利用样式的切换。

当只有一个参数时：切换 class
当存在第二个参数时：

  • 如果第二个参数的计算结果为 true，则添加指定的类值

  • 如果计算结果为 false，则删除它

后面的参数会被忽略，但是不会报错。

其他行为与其前面两个方法一致。第二个参数存在一定兼容性。

6. contains(className)

检查元素的类属性中是否存在指定的类值。返回 true 或 false

  1. oUl.classList.contains('bb');

参数为空字符串或者包含空格都会返回 false，不会报错。

7. replace( oldClass, newClass ) 替换

用一个新类替换已有类。此方法，兼容性还存在一定问题。很多浏览器还未实现，移动端都不支持。