源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

js通过classname来获取元素的方法

  • 时间:2021-03-08 15:22 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:js通过classname来获取元素的方法
[b]原生JS有3种方式来获取元素:[/b]
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来获取元素的方法全部内容了,希望大家多多支持编程素材网~
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部