JavaScript 使用類選擇器

■知識(shí)點(diǎn)

    HTML5為document對(duì)象和HTML元素新增了getElementsByClassName()方法，使用該方法可以選擇指定類名的元素。getElementsByClassName()方法可以接收一個(gè)字符串參數(shù)，包含一個(gè)或多個(gè)類名，類名通過(guò)空格分隔，不分先后順序，方法返回帶有指定類的所有元素的NodeList。

    瀏覽器支持狀態(tài)：IE9+、Firefox 3.0+, Safari 3+、Chrome和Opera 9.5+。如果不考慮兼容早期IE瀏覽器或者怪異模式，用戶可以放心使用。

■實(shí)例設(shè)計(jì)

【示例1】下面的示例使用document.getElementsByClassName("red")方法選擇文檔中所有包含red類的元素。

<div class="red">紅盒子</div>

<div class="blue red">藍(lán)盒子</div>

<div class="green red">綠盒子</div>

<script>

var divs = document.getElementsByClassName("red"); 

for(var i=0; i<divs.length;i++){

    console.log(divs[i].innerHTML);

}

</script>

【示例2】下面的示例使用document.getElementById("box")方法先獲取<div id="box">，然后在它下面使用getElementsByClassName("blue red")選擇同時(shí)包含red和blue類的元素。

<div id="box">

    <div class=nblue red green">blue red green</div>

</div>

<div class="blue red black">blue red black</div>

<script>

var divs = document.getElementByld("box").getElementsByClassName("blue red"); 

for(var i=0; i<divs.length;i++){

    console.log(divs[i].innerHTML);

}

</script>

在document對(duì)象上調(diào)用getElementsByClassName()會(huì)返回與類名匹配的所有元素，在元素上調(diào)用該方法就只會(huì)返回后代元素中匹配的元素。