登录  /  注册
首页 > web前端 > H5教程 > 正文

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

黄舟
发布: 2017-02-10 14:48:41
原创
1993人浏览过

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

<p>梦龙小站p</p>
<p>梦龙小站p</p>
<section><i>梦龙小站i</i>
	<p>梦龙小站p</p>
</section><section><em>梦龙小站em</em>
</section><p>
	<em>梦龙小站em</em>
	<em>梦龙小站em</em>
</p>
登录后复制

  JavaScript代码

var allBox = document.getElementsByClassName("box"),
	i, len;

alert(allBox[0].id) //[object NodeList]

for(i=0, l = allBox.length; i 

  预览效果

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

  HTML代码

<p>梦龙小站p</p>
<p>梦龙小站p</p>
<section><i>梦龙小站i</i>
	<p>梦龙小站p</p>
</section><section><em>梦龙小站em</em>
</section><p>
	<em>梦龙小站em</em>
	<em>梦龙小站em</em>
</p>
登录后复制

  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 <h2>  预览效果</h2><p>  调用这个方法的时候,只要能找到匹配的元素才会返回NodeList。在document对象上调用getElementsByClassName()方法始终都会返回与类名相匹配的所有元素。在元素上调用getElementsByClassName()方法就只会返回后代元素中匹配的元素。</p><p>  使用这个方法可以更方便的为带有某些类名的元素添加事件处理程序,从而不用再局限于使用ID或者标签添加事件处理程序了。因为返回的对象是NodeList,所以使用这个方法与使用getElementsByTagName()方法以及其他返回NodeList的DOM方法都具有同样的性能问题。都必须得用for循环来添加。所以梦龙认为,运用JavaScript库中的方法获取元素,和使用getElementsByClassName()方法获取元素各有利弊了。</p><p>  getElementsByClassName()方法支持一些现代浏览器如,IE9+、Firefox3+、Safari3.1+、Chrome和Opera9.5+。</p><p>  HTML5实战与剖析之CSS选择器——getElementsByClassName()方法就为大家介绍完了。总结一下,getElementsByClassName()方法就是用JavaScript原生方法获取元素类名的。getElementsByClassName()方法是HTML5中新添加的方法,有关HTML5的相关内容敬请关注梦龙小站有关HTML5的相关更新。感谢大家的支持。</p><p>以上就是HTML5实战与剖析之CSS选择器——getElementsByClassName()方法的内容,更多相关内容请关注PHP中文网(www.php.cn)!</p>
登录后复制
智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号