您的位置:首页 > Web前端 > JavaScript

js通过classname来获取元素

2015-12-14 15:34 513 查看
原生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的情况了
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: