classList介绍和原生JavaScript实现addClass、removeClass等

使用 jQuery 可以给元素很方便的添加 class 和删除 class 等操作，现在原生的 JavaScript 也可以实现这个方法了。使用 classList 可以方便的添加 class、删除 class、查询 class 等。
语法：
let elementClass = element.classList;
elementClasses 是一个 DOMTokenList 表示 element 的类属性。如果类属性未设置或为空，那么 elementClasses.length 返回 0。element.classList 本身是只读的，虽然你可以使用 add() 和 remove() 方法修改它。
方法：
add(String [, String] )
添加指定的类值。如果这些类已经存在于元素的属性中，那么它们将被忽略。
remove(String [,String] )
删除指定的类值。
item (Number)
按集合中的索引返回类值。
toggle (String [, force] )
当只有一个参数时：切换 class value; 即如果类存在，则删除它并返回 false，如果不存在，则添加它并返回 true。当存在第二个参数时：如果第二个参数的计算结果为 true，则添加指定的类值，如果计算结果为 false，则删除它
contains(String)
检查元素的类属性中是否存在指定的类值。
示例：
// div 是具有 class =“foo bar”的 <div> 元素的对象引用
div.classList.remove(“foo”);
div.classList.add(“anotherclass”);

// 如果 visible 被设置则删除它，否则添加它
div.classList.toggle(“visible”);

// 添加 / 删除 visible，取决于测试条件，i 小于 10
div.classList.toggle(“visible”, i < 10);

alert(div.classList.contains(“foo”));

// 添加或删除多个类
div.classList.add(“foo”,”bar”);
div.classList.remove(“foo”, “bar”);
兼容性：
不兼容 Android2.3 和 iOS4.2 的，在移动端上想使用也是有点头疼啊。IE 系列的更别说 IE9 和 IE8 了。所以目前来看，还是无法在实际中放心的使用，只能用于某些特定的项目等。不过我们可以通过一些 shim 来实现，或者最下方给出的原生 javascript 实现。
跨浏览器 javascript shim
https://github.com/eligrey/cl…
原生 JavaScript
类似于 jQuery 库的使用方式，使用 className 通过正则来添加或者删除 class。addClass、removeClass、toggleClass、hasClass
function hasClass(obj, cls) {
return obj.className.match(new RegExp(‘(\\s|^)’ + cls + ‘(\\s|$)’));
}

function addClass(obj, cls) {
if (!this.hasClass(obj, cls)) obj.className += ” ” + cls;
}

function removeClass(obj, cls) {
if (hasClass(obj, cls)) {
var reg = new RegExp(‘(\\s|^)’ + cls + ‘(\\s|$)’);
obj.className = obj.className.replace(reg, ‘ ‘);
}
}

function toggleClass(obj,cls){
if(hasClass(obj,cls)){
removeClass(obj, cls);
}else{
addClass(obj, cls);
}
}
参考链接：https://blog.csdn.net/leadn/a…