className与classList的区别及不同场景下的选型参考

核心区别 #

两者都是DOM中操作元素类名的方式，核心差异如下：

• className是DOM元素的原生字符串属性，完全对应HTML标签的class属性值，每次赋值都会直接覆盖元素原有全部类名。
• classList是DOM提供的类名专属操作API，返回类数组结构的DOMTokenList对象，存储了元素所有类名的集合，支持单个类名的增删改查，操作时不会影响其他未被指定的类。

举个实际对比示例，假设元素原有类名为red large：

• 执行btnElement.className = 'btn'后，元素仅剩下btn一个类，原有red、large类会被完全清除
• 执行btnElement.classList.add('btn')后，元素类名变为red large btn，原有类全部保留，仅新增目标类

各自适用场景 #

btnElement.className = 'btn' 适用场景 #

仅适合需要完全重置/替换元素所有类名的场景：

• 给元素设置全新的固定类名组合，不需要保留原有任何类
• 一次性批量设置多个类名，比如btnElement.className = 'btn btn-primary disabled'，直接拼接字符串即可完成多类设置

btnElement.classList.add('btn') 适用场景 #

适合绝大多数类名操作场景，尤其是需要精准修改单个类的场景：

• 仅新增、删除单个类，不希望改动其他现有类，比如给点击后的按钮加active激活类、添加临时动画类
• 需要判断类名是否存在、动态切换类名，classList自带contains()（判断类是否存在）、toggle()（切换类的存在状态）、remove()（删除指定类）等内置方法，不需要手动拆分字符串处理，出错概率更低

优先选择建议 #

绝大多数常规开发场景优先选择classList相关方法：操作更精准，不会出现误删其他类的问题，内置方法完全覆盖大部分类名操作需求，代码可读性和可维护性更高。
只有当你明确需要完全替换元素所有类名的时候，再使用className直接赋值。

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