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代码
<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 = ElementsByClassName("box"),
i, len;
alert(allBox[0].id) //[object NodeList]
for(i=0, l = allBox.length; i < l; i++){
allBox[i].style.background = "red";
}
  预览效果css选择器分为哪几类
  2、获取ID名为box2元素⾥⾯类名为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代码
//获取类名是oi和op的元素，并加上红⾊背景
var allBox = ElementById("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";
}
  预览效果
  调⽤这个⽅法的时候，只要能到匹配的元素才会返回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的相关更新。感谢⼤家的⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。