js 增删改查 元素的class

查询元素的class

const dom = document.querySelector('#box');

//getAttribuite()
const domClass = dom.getAttribute('class'); 

//className
const domClass1 = dom.className;

//classList
const domClass2 = dom.classList;

需要注意的是元素没有class的情况下三种方法的返回值：
getAttribute(): null;
className: 空字符串;
classList: 空字符串;

增加元素的class

const dom = document.querySelector('#box');

//setAttribute()
dom.setAttribute("class", "class-setattribute");

//className
dom.className = "class-classname";

//classList.add()
dom.classList.add("class-classlist-add");

三者不同：
setAttribute和className:两个都是覆盖操作，会将之前存在的class覆盖掉
classList.add():属于增加操作，在之前的class基础上增加，不会对现有的class造成影响

删除元素的class

const dom = document.querySelector('#box');

//setAttribute() 或者 removeAttribute()
dom.setAttribute("class", "");
dom.removeAttribute("class");

//className
dom.className = "";

//classList.remove();
dom.classList.remove("class-remove");

三者不同: 根据使用情况
全部删除：
setAttribute("class","")或者removeAttribute("class")，两个属于覆盖操作
删除指定class：
dom.classList.remove("class-no-use")

修改元素的class

const dom = document.querySelector('#box');

//setAttribute(): 基本思路就是重写全部class

//className: 和setAttribute()一样重写class

//classList: 删除想要修改的class再增加想要class