HTML5 DOM元素类名添加操作API classList简介

熟知且常用的两种给DOM元素添加类的操作就是原生js中的 className和jQuery中的addClass。
实际上classList已经出现很久，Firefox浏览器和Chrome浏览器都支持这个API；对于老油条IE，就仅仅对IE10以上的版本才能支持。手机端的话，发展至今，基本上除了老人机，一般都可以兼容。

classList API概要

举个栗子：

浏览器控制台输出结果：

控制台输出结果

再看其直接暴露的API：

暴露的api

• length属性，表示元素类名的个数。

• item() 支持一个参数，为类名的索引，返回值为对应的类名，例如执行：

  console.log(document.body.classList.item(0));
  

  则返回：a
  如若索引超出元素个数范围，例如：

  console.log(document.body.classList.item(3));
  

  则返回：null

• add() 支持一个或多个类名字符串参数。表示往类名列表中新增一个类名；如果之前类名存在，则添加忽略。例如：

  输出结果：

  

  add()返回的是undefined

• remove() 支持一个类名字符串参数。表示往类名列表中移除该类名。例如：

  输出结果：

  

  remove()返回的是undefined

• toggle() 支持一个类名字符串参数。若类名列表中有此类名，移除之，并返回false; 如果没有，则添加该类名，并返回true。

还有等等等等等就不逐一介绍了。

注：忘了说了，原本add() 只支持添加一个类名字符串参数，但是经过时代的变迁，add()如今可以支持添加多个类名字符串。例如：

输出结果：

当!当!!当!!!当!!!!