className 与 classList 的区别 / setAttribute和add的区别

className 与 classList 的区别
1，所有浏览器都支持className属性
classList是HTML5新增，对IE浏览器并不友好，IE10+与其他主流浏览器支持此属性。
2，className属性返回值是一个字符串，内容就是HTML元素的class属性内容。
classList属性返回一个包含指定元素所有样式类的集合对象。
3，.className的返回值就是包含元素class属性值的字符串。
.classList返回值是DOMTokenList类型集合，通过此集合可以非常便利的操作元素class属性。
通过className操作class属性，本质是对字符串的操作，比如判断class是否具有样式类"b"。
那么需要自己写代码，将返回的字符串分解为各个样式类，然后再进行判断，相对比较麻烦。
如果利用classList属性，那么将是非常轻松愉快的事情，使用DOMTokenList集合的contains方法即可实现。
利用classList返回的集合对象，只需要一个contains方法即可。
集合还具有其他方法，分别如下：
（1）.add()：添加样式类。
（2）.item()：返回指定索引的样式类。
（3）.remove()：删除指定样式类。
（4）.toggle()：切换样式类

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