className添加类名比较僵硬，如在添加按钮点击事件令其添加时，则多次点击则会出现多个类名，而classList则是class正确增改删的应用方法，如：
<div id=‘div1‘></div>
利用className:
div1.onclick = funcktion(){
div1.className = ‘c1‘
}
多次点击结果：<div id=‘div1‘ class=‘c1c1c1c1c1‘></div>
注：如果中间有空格（即：div1.className = ‘ c1‘）
则输出结果为<div id=‘div1‘ class=‘ c1 c1 c1 c1 c1‘></div>
显然第一个也有空格；
利用classList：
div1.onclick = funcktion(){
div1.className = ‘c1‘
}
多次点击结果：<div id=‘div1‘ class=‘c1‘></div>
Javascript-className与classList的区别
原文：https://www.cnblogs.com/lovechun/p/12192572.html