className和classList区别

• className和classList区别
• setAttribute和add区别

className和classList区别

  className：属性设置或者返回元素的class属性，返回的是一个字符串，如果我想删除或者添加，替换class属性的话就必须对返回值进行处理，因为className返回的是一个字符串，那么我必须修改这个字符串的值，一个class值还好，如果是多个的话就会有点麻烦，要先转数组再添加元素，最后转回字符串。
  classList：属性返回元素的类名，作为 DOMTokenList 对象。这个方法可以专门用于删除或者添加，替换class属性。
其包含以下属性和方法：
属性：
length: 返回类列表中类的数量
方法：
add(class1, class2, ...)在元素中添加一个或多个类名，如果指定的类名已存在，则不会添加。
contains(class)返回布尔值，判断指定的类名是否存在。
item(index) 返回类名在元素中的索引值。索引值从 0 开始。如果索引值在区间范围外则返回 null
remove(class1, class2, ...) 移除元素中一个或多个类名。注意： 移除不存在的类名，不会报错。
toggle(class, true|false) 在元素中切换类名。第一个参数为要在元素中移除的类名，并返回 false。 如果该类名不存在则会在元素中添加类名，并返回 true。
第二个是可选参数，是个布尔值用于设置元素是否强制添加或移除类，不管该类名是否存在。例如：
移除一个 class: element.classList.toggle("classToRemove", false);
添加一个 class: element.classList.toggle("classToAdd", true);

setAttribute和add区别

setAttribute方法用于创建或改变某个新属性。如果指定属性已经存在,则只设置该值并且会替换原来的值。
add方法是添加某个类，不会替换属性中的值，并且需要跟classList使用，因为它是classList的方法。