JS操作DOM类名：classList.add与remove方法实战

本文介绍如何使用JavaScript的classList属性对DOM节点进行类名管理。通过add()方法为选中元素添加特定样式类，如“active”，并利用remove()方法移除其他元素的该类名，从而实现Tab切换等交互效果。

JavaScript操作DOM类名基础

本文将介绍如何通过JavaScript为网页节点添加或移除CSS类名。

添加类名：使用节点.classList.add("类名")；

移除类名：使用节点.classList.remove("类名")；

以下以Tab标签页切换为例进行说明：

在开发Tab切换功能时，通常需要对当前选中的标签应用不同的样式。常见做法是：为被选中的Tab元素动态添加一个特定的class名，并通过CSS定义该类的样式。

例如，可以定义一个名为“active”的类名。

接着在CSS中设置该类的样式规则。


.active{
  color: #FFD113 !important;
}

在HTML结构中，为默认选中的首页Tab元素添加class属性值为“active”。


<a class="tab_item active">
  <span class="iconfont icon-shouye"></span>
  <span class="tab2">首页</span>
</a>

此时页面显示效果如下：

JavaScript操作DOM类名基础

在用户点击切换标签时，需要为当前被选中的子选项添加“active”类名，同时移除其他所有子选项的“active”类名。

具体如何实现？

首先，通过JavaScript获取所有Tab标签对应的DOM节点。


var arr = document.getElementsByClassName("tab_item");

接着，在遍历过程中，对当前被选中的子节点调用.classList.add("类名")，例如：


arr[i].classList.add("active");

这样即可为当前选中的子选项卡成功添加“active”类名。

随后，需将其他未选中选项卡上的“active”类名移除。只需在其他子节点的处理逻辑中调用.classList.remove("类名")，例如：


arr[j].classList.remove("active");

至此，我们实现了预期的Tab切换功能。

当然，也可采用其他替代方案实现相同效果。

JavaScript操作DOM类名基础

以上为使用JavaScript添加和删除class类名的详细步骤总结，希望能帮助读者解决问题。如有任何疑问，欢迎留言，小编会及时回复。感谢大家对本站的支持！