JavaScript 使用類選擇器

■知識點

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

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

■實例設(shè)計

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

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

<div class="blue red">藍盒子</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")選擇同時包含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對象上調(diào)用getElementsByClassName()會返回與類名匹配的所有元素，在元素上調(diào)用該方法就只會返回后代元素中匹配的元素。