原生JS给DOM元素增加修改删除class

上古时代常用的方法

//把所有class替换成指定class
document.getElementsByTagName('body')[0].className = 'snow-container'; 

//与上一个等价（此方法也可用来设置其他属性 如ID）
document.getElementsByClassName('test')[1].setAttribute("class",'newClass') 

//在原来的后面增加，注意要有空格
document.getElementsByTagName('body')[0].className += ' snow-container'; 

// 替换指定类（如果你的页面里有很多个“temp”类的话，用这种方法比较方便）
let classAtr = document.getElementById("temp").getAttribute("class");
let newClass = classAtr.replace("temp","red");
document.getElementById("temp").setAttribute("class",newClass);

// 删除指定类（如果你的页面里有很多个“temp”类的话，用这种方法比较方便）
let classAtr = document.getElementById("temp").getAttribute("class");
let newClass = classAtr.replace("temp","");
document.getElementById("temp").setAttribute("class",newClass);

现代浏览器建议使用 classList

为 < div> 元素添加多个类:

document.getElementById("myDIV").classList.add("mystyle", "anotherClass", "thirdClass");

为 < div> 元素移除多个类:

document.getElementById("myDIV").classList.remove("mystyle", "anotherClass", "thirdClass");

为 < div> 元素切换类:

document.getElementById("myDIV").classList.toggle("newClassName");

获取 < div> 元素的类名:(返回的为类数组)

<div id="myDIV" class="mystyle anotherClass thirdClass">I am a DIV element</div>
const x = document.getElementById("myDIV").classList;

x 输出结果为:

查看元素是否存在 “mystyle” 类:

var x = document.getElementById("myDIV").classList.contains("mystyle");

x 输出结果为:
true

classList 参考：https://www.runoob.com/jsref/prop-element-classlist.html