JavaScript 使用类选择器

■知识点

    HTML5为document对象和HTML元素新增了getElementsByClassName()方法，使用该方法可以选择指定类名的元素。getElementsByClassName()方法可以接收一个字符串参数，包含一个或多个类名，类名通过空格分隔，不分先后顺序，方法返回带有指定类的所有元素的NodeList。

    浏览器支持状态：IE9+、Firefox 3.0+, Safari 3+、Chrome和Opera 9.5+。如果不考虑兼容早期IE浏览器或者怪异模式，用户可以放心使用。

■实例设计

【示例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对象上调用getElementsByClassName()会返回与类名匹配的所有元素，在元素上调用该方法就只会返回后代元素中匹配的元素。