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实现的鼠标滚轮滚动切换页面效果(类似360默认页面滚动切换效果)
这篇文章主要介绍了js实现的鼠标滚轮滚动切换页面效果,类似360默认页面滚动切换效果.涉及JavaScript响应鼠标事件动态变换页面元素的相关技巧,需要的朋友可以参考下2016-01-01
这篇文章主要为大家详细介绍了Three.js基础学习教程，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
这篇文章主要介绍了小程序自定义单页面、全局导航栏的实现代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-03-03
uniapp小程序自定义tabbar以及初次加载闪屏解决方法
Uniapp小程序可以通过自定义tabbar来实现更加个性化的界面设计,下面这篇文章主要给大家介绍了关于uniapp小程序自定义tabbar以及初次加载闪屏解决方法,文中通过图文介绍的非常详细,需要的朋友可以参考下2023-05-05
这篇文章主要介绍了JavaScript设计模式之门面模式原理与实现方法,结合实例形式分析了门面模式的原理、实现方法及操作注意事项,需要的朋友可以参考下2020-03-03
下面小编就为大家带来一篇通过原生JS实现为元素添加事件的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-11-11
这篇文章主要为大家详细介绍了Bootstrap面板（Panels）的简单实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
这篇文章主要介绍了JS实现将数字金额转换为大写人民币汉字的方法,涉及javascript字符串与数组操作的相关技巧,需要的朋友可以参考下2016-08-08
本文给大家分享的是一段兼容各大浏览器的JavaScript阻止事件冒泡代码，虽然因为时间问题没有深入研究，但是还是相当不错的，这里推荐给大家2015-07-07
本文主要介绍了原生JS实现《别踩白块》游戏（兼容IE）的示例代码。具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
最新评论