前面為大家介紹了一些有關HTML5新加入的選擇器，分別是querySelector()，querySelectorAll()和getElementsByClassName()。這三個都有自己獨特的功能，大家有需要的話可以看HTML5實戰與剖析中的相關內容。今天為大家介紹classList屬性。

　　classList屬性究竟是做什麼的，我們先撇下classList不管。我們考慮這麼一個問題，那就是我們如何將擁有多個類別名稱的元素中的其中一個類別名稱刪除呢?夢龍較勁腦汁兒終於想到一個實現的方法。將擁有類別名稱li、meng和long，三個類別名稱中的類別名稱meng刪除。程式碼如下

　　HTML程式碼

<p class="li meng long">梦龙小站</p>

　　JavaScript程式碼㟎

　　為了從的元素類別名稱中刪除”meng”，上面這些代碼都是必須的。透過類似的演算法替換類別名稱並確認元素中是否包含該類別名稱。若是新增類別名稱可以透過拼接字串完成，但是必須透過偵測確定不會多次新增相同的類別名，很多JavaScript函式庫都是實作了這個方法，簡化操作。而刪除類別名稱則是先要取得已經有的類別名，找到要刪除類別名稱的位置，然後進行刪除。

　　1、remove(value)

　　remove(value)方法表示從清單中刪除給定的字串。小例子如下：

//获取要删除类名meng的p
var p = document.getElementsByTagName("p")[0];

//获取类名字符串并拆分成数组
var allClassName = p.className.split(" ");

//找到要删除的类名
var i, len, 
	pos = -1;

for(i=0, len = allClassName.length; i < len; i++){
	if(allClassName[i] == "meng"){
		pos = i;
		break;
	}
}

//删除类名
allClassName.splice(pos, 1);

alert(allClassName) //li,long

//将其余的类名拼成字符串并重新添加到元素的类名中
p.className = allClassName.join(" ");

登入後複製

<p class="li meng long">梦龙小站</p>

　　2、contains(value)　　contains(value )方法表示清單中是否存在給定的值，如果存在就回傳”true”，否則回傳”false」小範例如下：

HTML碼

//获取要删除类名meng的p
var p = document.getElementsByTagName("p")[0];

alert(p.classList)  //li meng long

p.classList.remove("meng") 

alert("p.className: " + p.className)  //p.className: li long

　　add(value)方法表示清單中的字串加入清單。如果已經存在就不添加了。小例子如下：

HTML程式碼

<p class="li meng long">梦龙小站</p>

登入後複製

登入後複製

登入後複製

登入後複製

//获取要删除类名meng的p
var p = document.getElementsByTagName("p")[0];

alert(p.classList.contains("meng")) //true

alert(p.classList.contains("menglong")) //false

　　4、toggle(value)

toggle(value)方法，如果清單中已經存在給定的值，刪除它;如果清單中沒有給定的值，請添加它。小例子如下：

HTML程式碼

<p class="li meng long">梦龙小站</p>

JavaScriptScript代碼

//添加类名 menglong

//获取要删除类名meng的p
var p = document.getElementsByTagName("p")[0];

p.classList.add("menglong");

alert("p.className: " + p.className)  //p.className: li meng long menglong