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

叁歲伎倆 2022-09-19 12:14 191阅读 0赞

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代码 ##

<div id="box1" class="box">梦龙小站div</div>
    <div>梦龙小站div</div>
    <section id="box2">
    	<i id="oi123123" class="oi">梦龙小站i</i>
    	<div class="box">梦龙小站div</div>
    </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";
    }

## 　　预览效果 ##

![Image 1][]

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

## 　　HTML代码 ##

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

## 　　预览效果 ##

![Image 1][]

调用这个方法的时候，只要能找到匹配的元素才会返回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的相关更新。感谢大家的支持。

[Image 1]: