前言

classList 是 JavaScript 中一個(gè)用于操作元素類(lèi)名的東西，這個(gè)東西有很多好用的方法，可以讓我們輕松地添加、刪除、切換和檢查元素的類(lèi)名。接下來(lái)我們?cè)敿?xì)學(xué)習(xí)一下 classList 的使用方法以及相關(guān)方法。

一、classList 的基本使用

classList 是 Element 接口的一個(gè)屬性，其返回值是一個(gè) DOMTokenList 對(duì)象，該對(duì)象表示當(dāng)前元素的類(lèi)名列表。我們可以通過(guò)以下方式來(lái)獲取一個(gè)元素的 classList：

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

上述代碼中，我們首先獲取了一個(gè) ID 為 myElement 的元素，然后通過(guò) classList 屬性獲取了該元素的類(lèi)名列表。

獲取到 classList 后，我們可以使用以下方法來(lái)操作元素的類(lèi)名：

add方法

add 方法用于向元素添加一個(gè)或多個(gè)類(lèi)名。例如，我們可以使用以下代碼向一個(gè)元素添加一個(gè)名為 active 的類(lèi)名：

element.classList.add('active');

如果需要添加多個(gè)類(lèi)名，可以在 add 方法中傳入多個(gè)參數(shù)，例如：

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

remove方法

remove 方法用于從元素中刪除一個(gè)或多個(gè)類(lèi)名。例如，我們可以使用以下代碼從一個(gè)元素中刪除名為 active 的類(lèi)名：

element.classList.remove('active');

如果需要?jiǎng)h除多個(gè)類(lèi)名，可以在 remove 方法中傳入多個(gè)參數(shù)，例如：

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

toggle方法

toggle 方法用于在元素中切換一個(gè)類(lèi)名的狀態(tài)。如果元素中已經(jīng)存在該類(lèi)名，則該類(lèi)名將被刪除；如果元素中不存在該類(lèi)名，則該類(lèi)名將被添加。例如，我們可以使用以下代碼在一個(gè)元素中切換名為 active 的類(lèi)名：

element.classList.toggle('active');

我們還可以在 toggle 方法中傳入一個(gè)布爾值作為第二個(gè)參數(shù)，用于指定是否強(qiáng)制添加或刪除類(lèi)名。例如，以下代碼將強(qiáng)制為一個(gè)元素添加名為 active 的類(lèi)名：

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

contains方法

contains 方法用于檢查元素中是否包含指定的類(lèi)名。如果元素中包含該類(lèi)名，則返回 true；否則返回 false。例如，我們可以使用以下代碼檢查一個(gè)元素中是否包含名為 active 的類(lèi)名：
Copy

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

二、classList 的高級(jí)用法

除了基本的添加、刪除、切換和檢查類(lèi)名的方法之外，classList 還提供了一些高級(jí)用法，可以讓我們更加方便地操作元素的類(lèi)名。

replace方法

replace 方法用于替換元素中的一個(gè)類(lèi)名為另一個(gè)類(lèi)名。例如，我們可以使用以下代碼將一個(gè)元素中名為 oldClass 的類(lèi)名替換為名為 newClass 的類(lèi)名：

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

item方法

item 方法用于獲取元素類(lèi)名列表中指定索引位置的類(lèi)名。例如，以下代碼將獲取一個(gè)元素的第二個(gè)類(lèi)名：

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

需要注意的是，索引位置從 0 開(kāi)始，因此上述代碼中的 1 表示獲取第二個(gè)類(lèi)名。

length用法

length 屬性用于獲取元素類(lèi)名列表的長(zhǎng)度。例如，以下代碼將獲取一個(gè)元素的類(lèi)名列表長(zhǎng)度：

const classListLength = element.classList.length;

forEach方法

forEach 方法用于遍歷元素的類(lèi)名列表，并對(duì)每個(gè)類(lèi)名執(zhí)行指定的操作。例如，以下代碼將輸出一個(gè)元素的所有類(lèi)名：

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

需要注意的是，forEach 方法只在現(xiàn)代瀏覽器中得到支持，如果需要兼容舊版瀏覽器，可以使用 Array.prototype.forEach 方法來(lái)代替。

三、代碼示例：

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);

以這段代碼為例，很顯然這是遞歸函數(shù)，里面用到了classList.contains('open') classList.remove('open') classList.add('open')實(shí)現(xiàn)了動(dòng)態(tài)添加刪除元素類(lèi)名，而通過(guò)類(lèi)名是否存在的狀態(tài)來(lái)實(shí)現(xiàn)遞歸的樹(shù)形菜單，非常精髓

四、總結(jié)

classList 是一個(gè)非常實(shí)用的工具，可以讓我們輕松地操作元素的類(lèi)名。在使用 classList 時(shí)，我們可以通過(guò) add、remove、toggle 和 contains 等方法來(lái)添加、刪除、切換和檢查類(lèi)名；還可以通過(guò) replace、item、length 和 forEach 等方法來(lái)進(jìn)行更高級(jí)的操作。需要注意的是，classList 只在現(xiàn)代瀏覽器中得到支持，如果需要兼容舊版瀏覽器，可以使用其他庫(kù)或者手動(dòng)操作元素的 className 屬性來(lái)代替。

到此這篇關(guān)于Javascript中classList的基本使用的文章就介紹到這了,更多相關(guān)js classList內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論