className与classList.value的区别是什么？为何优先使用className？

一、两者的主要区别 #

• 兼容性差异：className是很早就存在的DOM API，从IE6开始就支持，几乎覆盖所有浏览器；classList是后续新增的API，classList.value作为它的属性，兼容性稍晚，虽然目前主流浏览器都能支持，但如果要兼容IE10及以下的老旧环境，className的适配性更靠谱。
• 属性本质不同：className是元素对象的直接属性，直接对应HTML中的class属性；classList是一个动态的类名集合对象，value只是这个对象用来同步class属性的附属入口，相当于先获取类名集合，再通过它修改完整类串。
• 同步逻辑的细微差别：虽然修改两者最终都会更新元素的class属性，但修改classList.value后，classList的其他方法（比如contains判断类是否存在）会立刻同步生效；修改className时，classList也会同步更新，但这是因为class属性变化触发的集合更新，本质上底层是同一机制，但className是更直接的属性操作。

二、为啥不推荐用classList.value替代className #

• 语义更直观：className的命名直接表明它就是用来操作元素类名字符串的，意图一目了然；而classList的设计初衷是针对单个类名进行操作（比如添加、移除、切换类），value只是它附带的一个属性，用它来做整体类串赋值，不符合classList的设计语义，可读性反而不如className。
• 社区习惯问题：className已经被使用数十年，前端开发者普遍形成了使用习惯，各类教程、框架、工具库都优先用className来整体设置类名；如果强行改用classList.value，反而会让其他阅读代码的人困惑，所谓的“操作一致性”应该遵循社区通用习惯，而非硬凑classList的系列方法。
• 代码更简洁：className是元素的直接属性，写法更简短；classList.value需要先访问classList对象再获取属性，多了一层对象访问，虽然性能差异极小，但没必要多此一举。

总结 #

如果是一次性替换或设置元素的所有类名，优先用className，它直观、兼容性好、符合社区习惯；如果是针对单个类名做增删改查操作，就用classList的add、remove、toggle等方法，这才是它的设计初衷。classList.value虽然能实现同样的功能，但属于“用工具的附加功能干专门工具的活”，没必要为了凑所谓的“一致性”舍近求远。

内容的提问来源于stack exchange，提问作者Tigerrrrr