今天在做按钮时，需要给按钮做一个按下去的效果，想着用增加一个class替换背景颜色的方法去做，但是才发现不知道在原生JS中，如何用类似的方法像JQuery里面一样，直接用addClass和removeClass直接操作DOM的类。
百度了一下才发现原来用classList属性可以很方便地对class进行操作
例子：
document.getElementById("vipemail").classList.add("btn-active");
这段的含义就是将“btn-active”这个类添加到ID为vipemail的标签中
同理
document.getElementById("vipemail").classList.remove("btn-active");
意思就是去掉ID为vipemail的标签中的“btn-active”类
当然，classList不仅仅只有这两种用法，下面顺带介绍一下classList的常用方法
classList
-
语法
element.classList-
属性
-
length(作用：显示元素中有多少个类名)
例如：
<div id="myDIV" class="a b c"></div>
则
document.getElementById("myDIV").classList.length;
输出的结果是3。
-
方法
-
classList（作用：输出元素的类名列表）
例子：
<div id="myDIV" class="a b c"></div>
var x = document.getElementById("myDIV").classList;
x的输出结果为：a b c
-
add(class1,class2)（作用：在元素中添加一个或多个类名）
注意：如果指定的类名已经存在，则不会添加
例子：
document.getElementById("myDIV").classList.add("btn-active");
-
contains(class)（作用：判断指定的类名是否存在，返回布尔值）
例子：
<div id = "myDIV" class = "btn-active">
则
document.getElementById("myDIV").classList.contains("btn-active")
返回的结果为true
document.getElementById("myDIV").classList.contains("btn")
返回的结果为false
-
item(index)（作用：返回类名在元素中的索引值。索引值从0开始）
例子：
<div id="myDIV" class="a b c"></div>
document.getElementById("myDIV").classList.item(0)
返回的结果是a
-
remove（作用：移除元素中一个或多个类名）
注意：若移除不存在的类名，不会报错
例子：
document.getElementById("myDIV").classList.remove("btn-active");
最后附上classList的参考教程
classList | 菜鸟教程
