classList总结 classList总结

楔子最近在看JavaScript高程设计，越看越觉得JS真的博大精深，每读一次都会有新的收获。今天我们就来说一说classList这个API。
前言 JS操作元素类名的API最熟悉的莫过于className，常规用法如下

事实上，复杂的地方在于很多时候你并不知道元素真正类名有多少，而且也不可能每次都手写这么多类名组成的字符串。
当然你也可以通过以下代码部署：

var className = box1.className.split(/\s+/); //将className字符串分割成数组 varpos = -1, len = className.length; for(var i = 0; i < len; i++){ if(className[i]=== "warn"){ pos = i; } } className.splice(i,1); //从数组中移除该项 box1.className = className.join(" "); //将数组转换成字符串

很麻烦是不是？还好JQ封装了2个方法，addClass()和removeClass()。利用这2个方法，你可以直接给元素添加/移除类名，这也可以看出JQ流行的原因。
但是为了这么个简单的问题你要我引入JQ库？ok，猪脚登场。
classList classList,简单来说，就是为了增加/切换/移除 class类新增的API。返回的是元素的类名。本质上是DOMTokenList.
关于DOMTokenList
这里引用 mozilla MDN上的一段话：

The DOMTokenList interface represents a set of space-separated tokens. Such a set is returned by Element.classList, HTMLLinkElement.relList, HTMLAnchorElement.relList or HTMLAreaElement.relList. It is indexed beginning with 0 as with JavaScript Array objects. DOMTokenList is always case-sensitive.

翻译过来就是：

DOMTokenList这种类型表示一组空间分隔的标记。通常由HTMLElement.classList, HTMLLinkElement.relList, HTMLAnchorElement.relList或HTMLAreaElement.relList返回。从0开始的类JavaScript数组索引。DOMTokenList始终是区分大小写的。

也就是说 classList relList都属于DOMTokenList.
兼容性
来看下classList的兼容性。