JS 对classList添加、删除、修改、替换
我们jq常用对类名进行操作有添加类 addClass ，删除类：removeClass，修改切换类 toggleClass。现代浏览器进步了可以不再使用 jquery 也能直接对类名进行操作。现在可以使用 classList.add 、 classList.remove 、 classList.toggle 、classList.replace 、classList.contains 等原生JS方法。
Element.classList 是一个只读属性，返回一个元素的类属性的实时 DOMTokenList 集合。
相比将element.className作为以空格分隔的字符串来使用，classList 是一种更方便的访问元素的类列表的方法。
语法：
const elementClasses = elementNodeReference.classList;返回值
elementClasses 是一个DOMTokenList表示 elementNodeReference 的类属性 。如果类属性未设置或为空，那么 elementClasses.length 返回 0。虽然 element.classList 本身是只读的，但是你可以使用 add() 和 remove() 方法修改它。
const div = document.createElement('div');
div.className = 'foo';添加类add：
add() 方法 DOMTokenList 将给定类添加到列表中。
语法：
tokenList.add（token1 [，token2 [，... tokenN ]]）;参数：tokenN，DOMString代 表要添加到中的一个或多个类 tokenList 。
返回值：undefined
栗子：
div.classList.add("anotherclass");同时添加多个类值：
div.classList.add("foo", "bar", "baz");使用展开运算符同时添加多个类值：
// 使用展开语法添加多个类值
const cls = ["foo", "bar"];
div.classList.add(...cls); 移除类 remove:
remove() 方法从 DOMTokenList 中移除指定类。
语法：
tokenList.remove(token1[, token2[, ...]]);参数列表：tokenN... 表示要从列表中移除的一个 DOMString 。如果列表中不存在该字符串，不会出错也没有任何变化。
返回值：undefined
栗子：
div.classList.remove("foo");同时移除多个类值：
div.classList.remove("foo", "bar", "baz");使用扩展运算符同时移除多个类值：
// 使用展开语法移除多个类值
const cls = ["foo", "bar"];
div.classList.remove(...cls);切换修改类 toggle:
DOMTokenList 接口的 toggle() 方法从列表中删除一个给定的标记 并返回 false 。 如果标记 不存在，则添加并且函数返回 true。
语法：
tokenList.toggle(token, force);参数列表：
token ：标记列表中你想探查并切换的 DOMString 。
force ：可选一个 boolean 值, 设置后会将方法变成单向操作。如设置为 false , 则会删除标记列表中匹配的给定标记，且不会再度添加。如设置为 true， 则将在标记列表中添加给定标记，且不会再度删除。
返回值：
该方法返回一个 boolean 值 — 如给定标记不存在于列表中返回 false , 标记存在则返回 true 。
// 如果 visible 类值已存在，则移除它，否则添加它
div.classList.toggle("visible");替换类 replace:
// 将类值 "foo" 替换成 "bar"
div.classList.replace("foo", "bar");判断类是否存在 contains:
语法：
tokenList.contains(token);参数：
token 一个 DOMString 代表您要检查列表中是否存在的类。
返回值：boolean，如果 classList 包含这个类则返回 true，否则返回 false。
栗子：
div.classList.contains("foo")
浏览器兼容：
