JavaScript classList API 详解：增删改查与遍历操作

引言

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 是极为实用的工具，可轻松操作元素类名。使用时，可通过 add、remove、toggle 和 contains 等方法进行增删切换及检查；亦可利用 replace、item、length 和 forEach 等方法执行高级操作。需注意，classList 仅在现代浏览器中受支持，若需兼容旧版浏览器，可借助其他库或手动操作元素的 className 属性替代。

至此，关于 Javascript 中 classList 基本使用的介绍完毕。如需了解更多 js classList 相关内容，请搜索本站历史文章或继续浏览下方相关文章，期待大家日后多多支持本站！