HTML5实战与剖析之classList属性

classList属性究竟是干什么的，我们先撇下classList不管。我们考虑这么一个问题，那就是我们如何将拥有多个类名的元素中的其中一个类名删除呢?梦龙较劲脑汁儿终于想到一个实现的方法。将拥有类名li、meng和long，三个类名中的类名meng删除。代码如下

 

　　HTML代码

 

1. view source

    

   print?

   1.<div class="li meng long">梦龙小站</div>

 

 

　　JavaScript代码

view source

 

print?

01.//获取要删除类名meng的div 

02.var div = document.getElementsByTagName("div")[0]; 

03. 

04.//获取类名字符串并拆分成数组 

05.var allClassName = div.className.split(" "); 

06. 

07.//找到要删除的类名 

08.var i, len,  

09.pos = -1; 

10. 

11.for(i=0, len = allClassName.length; i < len; i++){ 

12.if(allClassName[i] == "meng"){ 

13.pos = i; 

14.break; 

15.} 

16.} 

17. 

18.//删除类名 

19.allClassName.splice(pos, 1); 

20. 

21.alert(allClassName) //li,long 

22. 

23.//将其余的类名拼成字符串并重新添加到元素的类名中 

24.div.className = allClassName.join(" "); 

 

　　预览效果

 

 

 

　　为了从的元素类名中删除”meng”，上面这些代码都是必须的。通过类似的算法替换类名并确认元素中是否包含该类名。若是添加类名可以通过拼接字符串完成，但是必须通过检测确定不会多次添加相同的类名，很多JavaScript库都是实现了这个方法，简化操作。而删除类名则是先要获取已经有的类名，找到要删除类名的位置，然后进行删除。

 

　　通过上面的方法可以看出，要实现一个简单的删除功能要写好几行代码，若不想写好几行代码就得引入一个库用库中的方法才可以。有了HTML5就不用那么麻烦了，我们可以用HTML5中的classList属性来完成这些步骤。这个classList属性是新集合类型DOMTokenList的实例。与其他DOM集合类似。DOMTokenList有一个表示自己包含多少元素的length属性，而要取得每个元素可以使用item()方法也可以使用方括号语法。此外，下面是给这个新类型定义的方法。

 　　1、remove(value) 

　　remove(value)方法表示从列表中删除给定的字符串。小例子如下：

 

　　HTML代码

view source

 

print?

1.<div class="li meng long">梦龙小站</div>

 

　　JavaScript代码

 

view source

 

print?

1.//获取要删除类名meng的div 

2.var div = document.getElementsByTagName("div")[0]; 

3. 

4.alert(div.classList)  //li meng long 

5. 

6.div.classList.remove("meng")  

7. 

8.alert("div.className: " + div.className)  //div.className: li long 

　　预览效果

 

 　　2、contains(value) 

　　contains(value)方法表示列表中是否存在给定的值，如果存在就返回”true”，否则返回”false”小例子如下：

 

　　HTML代码

1. view source

    

   print?

   1.<div class="li meng long">梦龙小站</div>

 

　　JavaScript代码
 

view source

 

print?

1.//获取要删除类名meng的div 

2.var div = document.getElementsByTagName("div")[0]; 

3. 

4.alert(div.classList.contains("meng")) //true 

5. 

6.alert(div.classList.contains("menglong")) //false

 　　3、add(value) 

　　add(value)方法表示列表中的字符串添加到列表中。如果已经存在就不添加了。小例子如下：

 

　　HTML代码

 

1.<div class="li meng long">梦龙小站</div>

 

　　JavaScript代码

view source

 

print?

1.//添加类名 menglong 

2. 

3.//获取要删除类名meng的div 

4.var div = document.getElementsByTagName("div")[0]; 

5. 

6.div.classList.add("menglong"); 

7. 

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

 

　　预览效果

 

 　　4、toggle(value) 

　　toggle(value)方法，如果列表中已经存在给定的值，删除它;如果列表中没有给定的值，添加它。小例子如下：

 

　　HTML代码

 

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

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

 

　　JavaScript代码

 

//切换类名 meng 

 

//获取要删除类名li的div 

var div = document.getElementsByTagName("div"); 

var i, len; 

 

for(i=0, len = div.length; i< len; i++){ 

div[i].classList.toggle("meng"); 

} 

 

alert("div[0].className: " + div[0].className)  //div[0].className: li long 

alert("div[1].className: " + div[1].className)  //div[1].className: li meng long 

 

　　预览效果

 

 

 

　　有关classList的小例子们已经为大家呈现了，通过小例子就能把这些小方法展现和解释清楚了。有了classList，除非你需要全部删除所有类名，或者完全重写元素的class属性，否则用不到className属性了，而且还附加很多实用的方法。支持classList属性的浏览器有Firefox 3.6+ 和Chrome。