如何通过原生JS实现动态添加和删除网页元素的类？

本文共计806个文字，预计阅读时间需要4分钟。

由于需要，为按钮组添加监听点击事件（需使用事件委托），当点击某个按钮时，对应的按钮添加一个类（激活类），其他未点击的按钮移除该类。添加、删除类有三种方法：直接操作DOM、使用类名操作、使用classList属性。优先使用第一种方法。

由于需要， 给按钮组监听点击事件(要求用事件委托)，当有一个按钮被点击时，相应的给该按钮添加一个类(激活类)，其他没有点击的按钮就要移出该类

添加和和删除类有三种方法

首先等到一个 dom 对象(也叫dom元素)， 通过document.getElement……的几种方法得到
如`

let element = document.getElementById("box");

1.通过类名， 获取类名： el.className， 赋值： el.className = "className" 会覆盖掉原来的类

2.通过属性，获取类名： el.getAttribute("class"); 赋值： el.setAttribute("class", "className1 className2"); 会覆盖掉原来的类

3.通过属性节点 attributeNode（性能差一点，但能兼容ie，getAttribute() ie 的有些版本不支持 ）setAttributeNode() 方法向元素中添加指定的属性节点。
如果这个指定的属性已存在，则此方法会替换它。