js addList最详细用法

使用过jquery开发的童鞋都知道：jquery中addClass与removeClass是两个使用高频的方法，操作dom元素增删class类是十分方便的。如今原生的js classList可以跟jquery操作class功能想媲美，在某些操作上甚至可以说更优于jquery。

element.classList 是一个只读属性，返回一个元素的类属性的实时 DOMTokenList 集合。虽然 element.classList 本身是只读的，但是你可以使用 add() 和 remove() 等方法修改它。相比将 element.className 作为以空格分隔的字符串来使用，classList 是一种更方便的访问、设置元素的类列表的方法。

1、 DOMTokenList 集合包含哪些信息

.length: 元素class类的个数总和

.value: 元素class类的字符串，同element.className 取值返回的字符串相同

另外可以跟JavaScript Array 对象一样，用索引去访问每一个class值，如:element.classList[0]访问第一个class值，element.classList[1]访问第二个class值（也可以这样访问：element.classList.item(0),element.classList.item(1)） 剩下返回的就是__proto__原型链中的一些方法啦，下面会详细介绍用法。

2、添加class类值方法：add( String [, String [, ...]] )

jq一次性添加多个类写法如下：.addClass('a b')，classList也支持一次性添加多个类，但每个类间是用逗号，隔开，如：elementNodeReference.classList.add('a','b')，如果这些类已经存在于元素的属性中，那么它们将被忽略。

3、移除class类值方法：remove( String [, String [, ...]] )

jq一次性移除多个类写法如下:.removeClass('a b')，classList也支持一次性移除多个类，但每个类间是用逗号，隔开，如：elementNodeReference.classList.remove('a','b')，即使删除不存在的类值也不会导致抛出异常。

4、添加或删除一个类值方法：toggle( String [, force] )

jq一次性添加或删除多个类写法如下:.toggleClass('a b',state),classList只支持一次性添加或删单个类值如：elementNodeReference.classList.toggle('a',state)，其中state支持条件语句写法，如：elementNodeReference.classList.toggle('a',i<10) 当只有一个参数时：切换类值；也就是说，即如果类值存在，则删除它并返回 false，如果不存在，则添加它并返回 true。 当存在第二个参数时：若第二个参数的执行结果为 true，则添加指定的类值，若执行结果为 false，则删除它。

5、检查元素 class 属性中是否存在指定的单个类值方法：contains( String )

jq支持检查元素是否有多个类值写法，如下:.hasClass('a b'),其中a b 必须跟在元素class值出现的顺序一样，否则返回为false,classList只支持检查元素 class 属性中是否存在指定的单个类值如：elementNodeReference.classList.contains('a')

6、用一个新类值替换已有的类值方法：replace( oldClass, newClass )

classList中如要将类值a替换成b写法如下：

elementNodeReference.classList.replace('a'，'b'),值得强调的是jq中没有相应的方法与之对应，只能先调用.removeClass('a')再调用.addClass('b')来实现。

7、浏览器兼容性

使用classList,需要特别注意：IE9及之前的版本完全不支持classList属性，甚至IE10也仅只是部分支持，但Edge浏览器下还是可以放心使用的！ 总的来说，如果不需要兼容ie系列，可大胆放心使用，完全可以像用JQ一样便捷了。