本文详解原生JavaScript中动态添加和删除类名的四种方法，重点介绍classList属性的灵活用法及其兼容性限制。结合事件委托技术，演示如何在按钮组点击时精准切换激活状态，提供完整的HTML结构与ES6语法实现的JS代码示例，帮助开发者掌握DOM类名操作的实用技巧。
需求背景与事件委托机制
在实际开发中，常需为按钮组绑定点击事件，且推荐使用事件委托机制。当用户点击某个按钮时，系统应自动为该按钮添加表示激活状态的类名，同时移除其他按钮上相同的类名，以确保同一时间仅有一个按钮处于激活状态。
在JavaScript中，实现类名的添加与删除主要存在四种不同的操作路径。
DOM元素获取与类名操作四种方法
执行任何类名操作前，首先需要通过document.getElementById等DOM查询方法获取目标DOM元素对象。
let element = document.getElementById("box");第一种方式是通过className属性直接操作。获取当前类名可使用el.className，赋值时直接执行el.className = "className"。需要注意的是，这种赋值方式会完全覆盖元素原有的所有类名，保留新设置的类名。
第二种方式利用setAttribute和getAttribute方法。获取类名需调用el.getAttribute("class")，赋值则使用el.setAttribute("class", "className1 className2")。与className类似，直接赋值也会覆盖原有的类名列表。
第三种方式涉及属性节点attributeNode，虽然性能略低，但能兼容部分旧版IE浏览器（某些IE版本中getAttribute()可能不支持）。使用setAttributeNode()可向元素添加指定属性节点，若该属性已存在则进行替换。获取类名可通过getAttributeNode("class").value，赋值时需先创建属性节点并设置nodeValue。
let attr = document.createAttribute("class");
attr.nodeValue = "className";
el.setAttributeNode(attr)第四种方式推荐使用classList属性，这是现代浏览器支持的标准API。获取类名集合使用el.classList，追加类名调用el.classList.add("className")，删除类名则使用el.calssList.remove("className")（注：原文拼写为calssList，实际应为classList）。该方法不会覆盖原有类名，仅进行增删操作。
对比上述四种方法，classList属性最为灵活且易于使用，适合现代开发场景。然而，其兼容性较差，不支持IE9及以下版本的浏览器，因此在需要兼容老旧环境时需考虑备选方案。
完整代码实现与兼容性分析
以下是具体的代码实现示例。
HTML结构部分，定义了一个包含多个按钮的容器。
<div id="btn-group">
<div class="btn btn-active">按钮1</div>
<div class="btn">按钮2</div>
<div class="btn">按钮3</div>
<div class="btn">按钮4</div>
</div>
JavaScript代码部分，示例中采用了ES6语法以简化代码书写，提升可读性。
let myEventUtil = {
// 添加监听事件
addEvent (element, type, handler) {
if (element.addEventListener) {
element.addEventListener(type, handler, false);
} else if (element.attach){ // ie
element.attach("on"+ type, handler);
} else {
element['on' + type] = handler;
}
},
getTarget (event) {
let event = event || window.event;
return event.target || event.srcElement;
}
}
let my$ = id => document.getElementById(id);
let btnGroup = my$(“btn-group”);
myEventUtil.addEvent(btnGroup, 'on', function (ev) {
// 给所有的 btn 都移除激活的类 btn-active
// console.log(this) ==> 是一个dom元素 btnGroup
// 可以通过 el.children[i]拿到具体的子元素
// 拿到子元素了可以通过 el.classList.remove("className") 删除类
// el.classList.add("className") 来添加类
// 删除类
let len = this.children.length;
for (let i = 0; i < len; i ++) {
this.children[i].classList.remove("btn-active");
// this.children[i].className = "btn"; // 用其中一个就行
}
// 添加类, 拿到具体的 btn 给它添加类
myEventUtil.getTarget(ev).classList.add("btn-active");
// myEventUtil.getTarget(ev).className = "btn"; // 用其中一个就行
});
以上内容总结了原生JavaScript动态添加和删除类名的核心方法，旨在为开发者提供实用的技术参考。如有疑问，欢迎留言交流，我们将及时回复。感谢对本站的支持。