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

Script. 2.取得ID名為box2元素裡面類別名稱為box的元素，並加上紅色背景

　　HTML程式碼

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";
}

　　JavaScript程式碼

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

　　預覽效果

　　List　List　　網路的元素，只要能找到這個方法的元素，只要會找到這個方法的元素，只要會找到這個方法的元素，只要能找到這個方法。在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中文網（www.php.cn）！