className与classList的取舍

在JavaScript的DOM操作中，修改元素的class属性是常见的需求。开发者通常面临两种选择：使用传统的className属性，或者较新的classListAPI。本文将深入探讨两者的区别、优缺点以及适用场景，帮助你在实际开发中做出明智选择。

1. className：传统但直接

className是DOM元素的一个属性，它直接对应HTML中的class属性，返回一个包含所有类名的字符串。

基本用法

javascript 复制代码

// 获取类名
const element = document.getElementById('myElement');
const classes = element.className; // 返回"class1 class2 class3"

// 设置类名
element.className = 'newClass1 newClass2';

优点

广泛兼容：所有浏览器都支持，包括非常旧的版本
简单直接：对于简单的类名操作非常直观

缺点

操作繁琐：需要手动处理字符串来添加、删除或切换类
容易出错：直接赋值会覆盖所有现有类
性能问题：频繁修改时需要解析和拼接字符串

2. classList：现代而强大

classList是一个DOMTokenList对象，提供了操作类名的方法集合。

基本用法

javascript 复制代码

const element = document.getElementById('myElement');

// 添加类
element.classList.add('newClass');

// 删除类
element.classList.remove('oldClass');

// 切换类
element.classList.toggle('active');

// 检查类是否存在
if (element.classList.contains('someClass')) {
  // 执行操作
}

优点

方法丰富：提供add、remove、toggle、contains等方法
非破坏性：不会意外覆盖其他类
性能更优：内部优化，减少字符串操作
链式调用：支持方法链式调用

缺点

兼容性：IE9及以下版本不支持（可通过polyfill解决）
学习曲线：需要熟悉API方法

3. 性能对比

在大多数现代浏览器中，classList的性能优于className，特别是在频繁操作类名时：

classList.add/remove比手动拼接className字符串快约30-50%
classList.toggle比手动实现切换逻辑快约40%
差异在大量操作或动画场景中更为明显

4. 使用建议

使用className的场景

需要支持非常旧的浏览器（IE8及以下）
需要一次性设置所有类名（完全替换）
项目代码库已经大量使用className且重构成本高

使用classList的场景

现代浏览器环境（包括IE10+）
需要频繁添加、删除或切换单个类
需要检查类是否存在
追求更简洁、可读性更高的代码

5. 实际示例

导航菜单激活状态（使用classList）

javascript 复制代码

const navItems = document.querySelectorAll('.nav-item');

navItems.forEach(item => {
  item.addEventListener('click', () => {
    // 移除所有active类
    document.querySelector('.nav-item.active')?.classList.remove('active');
    // 添加当前active类
    item.classList.add('active');
  });
});

主题切换（使用className）

javascript 复制代码

function setTheme(theme) {
  const body = document.body;
  // 完全替换类名
  body.className = `app ${theme}-theme`;
}

6. 结论

在现代Web开发中，classList通常是更好的选择，它提供了更清晰、更安全的API，并且在性能上也有优势。只有在需要支持非常旧的浏览器或需要完全替换所有类名时，才考虑使用className。

随着浏览器环境的不断进化，classList已经成为DOM操作的标准实践，建议新项目优先采用。对于现有项目，可以在维护过程中逐步将className重构为classList，以提高代码质量和性能。