原生JS实现JQuery的addClass和removeClas

• 今天在做按钮时，需要给按钮做一个按下去的效果，想着用增加一个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 | 菜鸟教程