js通过classname来获取元素js通过classname来获取元素
原生JS有3种方式来获取元素:
getElementById('id')
getElementsByName('name')
getElementsByTagName('tag')
getElementById是获取元素最快的方式,但我们不能给每个HTML元素都加以ID吧,所以我们需要一个很方便的通过className来获取元素:
function getElementsByClassName(className,tagName){
var ele=[],all=...
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==是不行了,以前的文章中我写过《js实现hasClass》,也讲述了《jQuery的hasclass的实现原理》
所以我们只要把上面两篇文章的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.match(new RegExp('(\\s|^)'+className+'(\\s|$)'))){
ele[ele.length]=all[i];
}
}
return ele;
}这样就能处理一个元素含有多个classname的情况了
本文档为【js通过classname来获取元素】，请使用软件OFFICE或WPS软件打开。作品中的文字与图均可以修改和编辑，
图片更改请在作品中右键图片并更换，文字修改请直接点击文字进行修改，也可以新增和删除文档中的内容。
该文档来自用户分享，如有侵权行为请发邮件ishare@vip.sina.com联系网站客服，我们会及时删除。
[版权声明] 本站所有资料为用户分享产生，若发现您的权利被侵害，请联系客服邮件isharekefu@iask.cn，我们尽快处理。
本作品所展示的图片、画像、字体、音乐的版权可能需版权方额外授权，请谨慎使用。
网站提供的党政主题相关内容(国旗、国徽、党徽..)目的在于配合国家政策宣传，仅限个人学习分享使用，禁止用于任何广告和商用目的。
浙公网安备 33021202002483