深入学习js的classList

classList的深入学习

前言

classList 是 JavaScript 中一个用于操作元素类名的东西，这个东西有很多好用的方法，可以让我们轻松地添加、删除、切换和检查元素的类名。接下来我们详细学习一下 classList 的使用方法以及相关方法。

一、classList 的基本使用

classList 是 Element 接口的一个属性，其返回值是一个 DOMTokenList 对象，该对象表示当前元素的类名列表。我们可以通过以下方式来获取一个元素的 classList：

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

上述代码中，我们首先获取了一个 ID 为 myElement 的元素，然后通过 classList 属性获取了该元素的类名列表。

获取到 classList 后，我们可以使用以下方法来操作元素的类名：

add方法

add 方法用于向元素添加一个或多个类名。例如，我们可以使用以下代码向一个元素添加一个名为 active 的类名：

element.classList.add('active');

如果需要添加多个类名，可以在 add 方法中传入多个参数，例如：

element.classList.add('active','visible','highlight');

remove方法

remove 方法用于从元素中删除一个或多个类名。例如，我们可以使用以下代码从一个元素中删除名为 active 的类名：

element.classList.remove('active');

如果需要删除多个类名，可以在 remove 方法中传入多个参数，例如：

element.classList.remove('active','visible','highlight');

toggle方法

toggle 方法用于在元素中切换一个类名的状态。如果元素中已经存在该类名，则该类名将被删除；如果元素中不存在该类名，则该类名将被添加。例如，我们可以使用以下代码在一个元素中切换名为 active 的类名：

element.classList.toggle('active');

我们还可以在 toggle 方法中传入一个布尔值作为第二个参数，用于指定是否强制添加或删除类名。例如，以下代码将强制为一个元素添加名为 active 的类名：

element.classList.toggle('active',true);

contains方法

contains 方法用于检查元素中是否包含指定的类名。如果元素中包含该类名，则返回 true；否则返回 false。例如，我们可以使用以下代码检查一个元素中是否包含名为 active 的类名：
Copy

const hasActiveClass = element.classList.contains('active');

二、classList 的高级用法

除了基本的添加、删除、切换和检查类名的方法之外，classList 还提供了一些高级用法，可以让我们更加方便地操作元素的类名。

replace方法

replace 方法用于替换元素中的一个类名为另一个类名。例如，我们可以使用以下代码将一个元素中名为 oldClass 的类名替换为名为 newClass 的类名：

element.classList.replace('oldClass','newClass');

item方法

item 方法用于获取元素类名列表中指定索引位置的类名。例如，以下代码将获取一个元素的第二个类名：

const secondClass = element.classList.item(1);

需要注意的是，索引位置从 0 开始，因此上述代码中的 1 表示获取第二个类名。

length用法

length 属性用于获取元素类名列表的长度。例如，以下代码将获取一个元素的类名列表长度：

const classListLength = element.classList.length;

forEach方法

forEach 方法用于遍历元素的类名列表，并对每个类名执行指定的操作。例如，以下代码将输出一个元素的所有类名：

element.classList.forEach(className =>{
  console.log(className);});

需要注意的是，forEach 方法只在现代浏览器中得到支持，如果需要兼容旧版浏览器，可以使用 Array.prototype.forEach 方法来代替。

三、代码示例：

functioncreateMenu(menuData){const menuEl = document.createElement('ul');

                menuData.forEach(item =>{const itemEl = document.createElement('li');const labelEl = document.createElement('span');
                    labelEl.innerText = item.label;
                    itemEl.appendChild(labelEl);if(item.children.length >0){
                        labelEl.addEventListener('click',()=>{if(itemEl.classList.contains('open')){
                                itemEl.classList.remove('open');
                                itemEl.removeChild(itemEl.lastChild);}else{
                                itemEl.classList.add('open');const submenuEl =createMenu(item.children);
                                itemEl.appendChild(submenuEl);}});}

                    menuEl.appendChild(itemEl);});return menuEl;}const menuEl =createMenu(menu);
            document.body.appendChild(menuEl);

以这段代码为例，很显然这是递归函数，里面用到了

classList.contains('open') classList.remove('open') classList.add('open')

实现了动态添加删除元素类名，而通过类名是否存在的状态来实现递归的树形菜单，非常精髓

四、总结

classList 是一个非常实用的工具，可以让我们轻松地操作元素的类名。在使用 classList 时，我们可以通过 add、remove、toggle 和 contains 等方法来添加、删除、切换和检查类名；还可以通过 replace、item、length 和 forEach 等方法来进行更高级的操作。需要注意的是，classList 只在现代浏览器中得到支持，如果需要兼容旧版浏览器，可以使用其他库或者手动操作元素的 className 属性来代替。