js通过classname来获取元素的方法
更新时间：2016年11月24日 08:58:47 投稿：jingxian
下面小编就为大家带来一篇js通过classname来获取元素的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起 小编过来看看吧
原生JS有3种方式来获取元素:
getElementById('id')
getElementsByName('name')
getElementsByTagName('tag')
getElementById是获取元素最快的方式,但我们不能给每个HTML元素都加以ID吧,所以我们需要一个很方便的通过className来获取元素
function getElementsByClassName(className,tagName){
var ele=[],all=document.getElementsByTagName(tagName||"*");
for(var i=0;i<all.length;i++){
if(all[i].className==className){
ele[ele.length]=all[i];
}
}
return ele;
}
console.log(getElementsByClassName("entry"));
console.log(getElementsByClassName("entry","div"));
实现原理很简单,通过getElementsByTagName获取到一个元素集合,如果传入了tagname这个参数就根据传入的
tagname来获取,否则获取所有的元素,然后再一个一个元素来匹配classname是否相等..
上面这个方法很粗糙,能实现我们的基本需求,如果我们要获取的元素有多个 classname怎么办?
明显通过className==是不行了
所以我们只要把上面两篇文章的hasclass函数搬过来就OK了，我们再次来改造下我们的getElementsByClassName函数
function getElementsByClassName(className,tagName){
var ele=[],all=document.getElementsByTagName(tagName||"*");
for(var i=0;i<all.length;i++){
if(all[i].className.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'))){
ele[ele.length]=all[i];
}
}
return ele;
}
这样就能处理一个元素含有多个classname的情况了
以上就是小编为大家带来的js通过classname来获取元素的方法全部内容了，希望大家多多支持脚本之家~
相关文章
这篇文章主要为大家详细介绍了JS作用域，剖析JS的作用域问题，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
createElement与createDocumentFragment的点点区别小结
在DOM操作里，createElement是创建一个新的节点，createDocumentFragment是创建一个文档片段2011-12-12
这篇文章主要与大家分享js获取一个checkbox看其是否被选中的具体实现，很简单，但很实用，需要的朋友可以参考下2014-09-09
判断用户是否在线的代码，需要的朋友可以参考下。2011-03-03
下面小编就为大家带来一篇JS去除空格和换行的正则表达式(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-06-06
JavaScript 解决ajax中parsererror错误案例详解
这篇文章主要介绍了JavaScript 解决ajax中parsererror错误案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下2021-08-08
这篇文章主要为大家详细介绍了微信小程序实现答题功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-06-06
这篇文章主要介绍了js检测iframe是否加载完成的方法,涉及JavaScript针对框架页面控件值的判断与页面加载的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-11-11
今天小编就为大家分享一篇js监听html页面的上下滚动事件方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
js实现文章目录索引导航(table of content)
这篇文章主要介绍了js实现文章目录索引导航(table of content),需要的朋友可以参考下2020-05-05
最新评论