如何使用JavaScript将指定类名的所有元素的类名替换为新类名

实现方法 #

你可以通过以下两种常用方案实现批量修改指定类名元素的类名，优先推荐第一种，可避免动态集合的坑：

方案1：使用querySelectorAll（推荐）

querySelectorAll返回静态的NodeList集合，不会因为元素类名修改发生动态变化，遍历更稳定：

// 匹配所有类名为MyClass的元素
const targetEls = document.querySelectorAll('.MyClass');

// 遍历修改类名
targetEls.forEach(el => {
  // 方式1：直接覆盖所有类名（仅当元素只有MyClass一个类时使用）
  el.className = 'notMyClass';

  // 方式2：仅替换指定类名，保留元素其他类（更通用，推荐）
  // el.classList.replace('MyClass', 'notMyClass');
});

方案2：使用getElementsByClassName

getElementsByClassName返回动态的HTMLCollection，元素类名修改后会自动从集合中移除，直接正序遍历会出现元素遗漏，需要先转成静态数组再操作：

// 转成数组后再遍历，避免动态集合的问题
const targetEls = Array.from(document.getElementsByClassName('MyClass'));

targetEls.forEach(el => {
  el.classList.replace('MyClass', 'notMyClass');
});

注意事项 #

• 如果元素除了MyClass外还有其他需要保留的类，不要直接给className赋值，必须用classList.replace方法操作
• 动态集合（如getElementsByClassName、getElementsByTagName的返回值）不建议直接遍历做修改类名、删除元素这类会影响集合长度的操作，转成数组或者用静态集合querySelectorAll更稳妥

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