深入学习js的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 方法来代替。

三、代码示例：

			function createMenu(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 属性来代替。

代码007普通

打赏 收藏 海报 链接