HTML5实战与剖析之CSS选择器——getElementsByClassName()方法

　　HTML5中的querySelector()方法和querySelectorAll()方法都在前几篇中为大家介绍过了，不知道大家了解得怎么样了呢?在这里复习一下，querySelector()方法是返回与传递的CSS选择符相匹配的第一个元素;querySelectorAll()方法是返回与传递的CSS选择符相匹配的所有元素，是一个NodeList对象。简单的回顾之后，我来分享一下新一个方法——getElementsByClassName()方法。

　　随着HTML4在Web开发领域得到了很多应用之后，导致了HTML4有了很多的变化。由于class类名在CSS中运用广泛，所以很多情况下编写JavaScript代码的时候要获取的并不是ID而是class类名。于是乎，HTML5就新添加了getElementsByClassName()方法。getElementsByClassName()方法可以通过document对象及所有HTML元素调用该方法。获取一个元素的类名这个获取方法最早出现在很多JavaScript库中，他们都是通过DOM功能实现的，性能方面消耗比较大。有了这个原生的getElementsByClassName()方法，在性能方面省了许多。

　　getElementsByClassName()方法接收一个参数，这个参数也是CSS选择符的字符串，可以是一个也可以是多个。getElementsByClassName()方法返回的则是带有指定类的所有元素的NodeList。注意传入多个类名的时候，类名的先后顺序不重要。理论基础就先为大家介绍到这里，下面来看小例子吧。

　　1、获取所有类名为box，并加上红色背景

　　HTML代码

梦龙小站p

梦龙小站i

梦龙小站p

梦龙小站em

梦龙小站em 梦龙小站em

　　JavaScript代码

var allBox = document.getElementsByClassName("box"),
	i, len;

alert(allBox[0].id) //[object NodeList]

for(i=0, l = allBox.length; i

　　预览效果

　　2、获取ID名为box2元素里面类名为box的元素，并加上红色背景

　　HTML代码

<喎? f/ware/vc/"="" target="_blank" class="keylink">vcD4KPHA+PC9wPgo8cHJlIGNsYXNzPQ=="brush:java;">

梦龙小站p

梦龙小站em

梦龙小站em 梦龙小站em

　　JavaScript代码

//获取类名是oi和op的元素，并加上红色背景
var allBox = document.getElementById("box2").getElementsByClassName("box"),
	i, len;

alert(allBox[0].id) //[object NodeList]


for(i=0, l = allBox.length; i

　　预览效果

$n块ズhu忖沧hr闉炟碔^欓戆倳?5侂D曢灋??Z裁Z欙椁€汀讒娝`z?zgФ纑M?jg崱讒娝C8氰瑬痠'+姏`z?zgФ纑 V枝{鷌侂D曢灋??Z裁Z欐…?/os/liulanqi/$ 浏览器如，IE9+、Firefox3+、Safari3.1+、Chrome和Opera9.5+。

　　HTML5实战与剖析之CSS选择器——getElementsByClassName()方法就为大家介绍完了。总结一下，getElementsByClassName()方法就是用JavaScript原生方法获取元素类名的。getElementsByClassName()方法是HTML5中新添加的方法，有关HTML5的相关内容敬请关注梦龙小站有关HTML5的相关更新。感谢大家的支持。