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

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

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

HTML代码

<p id="box1" class="box">梦龙小站p</p>
<p>梦龙小站p</p>
<section id="box2">
	<i id="oi123123" class="oi">梦龙小站i</i>
	<p class="box">梦龙小站p</p>
</section>
<section id="box3" class="box3">
	<em class="op">梦龙小站em</em>
</section>
<p>
	<em class="box">梦龙小站em</em>
	<em id="op123123" class="op">梦龙小站em</em>
</p> 

　　JavaScript代码

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

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

for(i=0, l = allBox.length; i < l; i++){
	allBox[i].style.background = "red";
} 

　　预览效果

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

　　HTML代码

<p id="box1" class="box">梦龙小站p</p>
<p>梦龙小站p</p>
<section id="box2">
	<i id="oi123123" class="oi">梦龙小站i</i>
	<p class="box">梦龙小站p</p>
</section>
<section id="box3" class="box3">
	<em class="op">梦龙小站em</em>
</section>
<p>
	<em class="box">梦龙小站em</em>
	<em id="op123123" class="op">梦龙小站em</em>
</p> 

　　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 < l; i++){	allBox[i].style.background = "red";
} 

　　预览效果

　　调用这个方法的时候，只要能找到匹配的元素才会返回NodeList。在document对象上调用getElementsByClassName()方法始终都会返回与类名相匹配的所有元素。在元素上调用getElementsByClassName()方法就只会返回后代元素中匹配的元素。

　　使用这个方法可以更方便的为带有某些类名的元素添加事件处理程序，从而不用再局限于使用ID或者标签添加事件处理程序了。因为返回的对象是NodeList，所以使用这个方法与使用getElementsByTagName()方法以及其他返回NodeList的DOM方法都具有同样的性能问题。都必须得用for循环来添加。所以梦龙认为，运用JavaScript库中的方法获取元素，和使用getElementsByClassName()方法获取元素各有利弊了。

　　getElementsByClassName()方法支持一些现代浏览器如，IE9+、Firefox3+、Safari3.1+、Chrome和Opera9.5+。

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

以上就是HTML5实战与剖析之CSS选择器——getElementsByClassName()方法的内容，更多相关内容请关注PHP中文网（HdhCmsTestgxlcms测试数据）！

查看更多关于HTML5实战与剖析之CSS选择器——getElementsByClassName()方法的详细内容...