一聚教程网:一个值得你收藏的教程网站

热门教程

js中getElementsByClassName的实现实例

时间:2022-11-14 22:02:43 编辑:袖梨 来源:一聚教程网

先看一个例子

代码如下 复制代码

/*
* 根据元素clsssName得到元素集合
* @param fatherId 父元素的ID,默认为document
* @tagName 子元素的标签名
* @className 用空格分开的className字符串
*/
function getElementsByClassName(fatherId,tagName,className){
node = fatherId&&document.getElementById(fatherId) || document;
tagName = tagName || "*";
className = className.split(" ");
var classNameLength = className.length;
for(var i=0,j=classNameLength;i //创建匹配类名的正则
className[i]= new RegExp("(^|s)" + className[i].replace(/-/g, "-") + "(s|$)");
}
var elements = node.getElementsByTagName(tagName);
var result = [];
for(var i=0,j=elements.length,k=0;i var element = elements[i];
while(className[k++].test(element.className)){//优化循环
if(k === classNameLength){
result[result.length] = element;
break;
}
}
k = 0;
}
return result;
}

好,我们来测试一下:

代码如下 复制代码





正确的得到了结果。

有人会问,原生的方法调用效率是最高的,有很多浏览器已经将实现了getElementsByClassName这个方法,那为什这里没有先调用原生的再调用自定义的呢?

对,原生的效率是很高,它支持多个class条件的查询,但是最大的问题是他不支持getElementsByClassName("container","div","aaa ccc"),这种在指定标签中查找指定元素为指定class的情况。所以,这里舍弃了原生的方法调用。

例2

代码如下 复制代码

function getClass(tagName,className) //获得标签名为tagName,类名className的元素
{
if(document.getElementsByClassName) //支持这个函数
{ return document.getElementsByClassName(className);
}
else
{ var tags=document.getElementsByTagName(tagName);//获取标签
var tagArr=[];//用于返回类名为className的元素
for(var i=0;i < tags.length; i++)
{
if(tags[i].class == className)
{
tagArr[tagArr.length] = tags[i];//保存满足条件的元素
}
}
return tagArr;
}

}

热门栏目