javascript getElementsByClassName实现代码
更新时间：2010年10月11日 22:49:01 作者：
根据元素clsssName得到元素集合的函数，需要的朋友可以参考下。
先来看一下代码：（支持多个class查询和在某个范围内进行查询）
/*
* 根据元素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<j;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<j;i++){//缓存length属性
var element = elements[i];
while(className[k++].test(element.className)){//优化循环
if(k === classNameLength){
result[result.length] = element;
break;
}
}
k = 0;
}
return result;
}
好，我们来测试一下：
<div id="container">
<span class="aaa zzz ccc"></span>
<div class="aaa bbb ccc"></div>
</div>
<div class="aaa bbb ccc"></div>
window.onload = function(){
alert(getElementsByClassName(document,"div","aaa ccc").length);//2
alert(getElementsByClassName("container","div","aaa ccc").length);//1
alert(getElementsByClassName("container","span","aaa zzz").length);//1
}
正确的得到了结果。
原生的getElementsByClassName
有人会问，原生的方法调用效率是最高的，有很多浏览器已经将实现了getElementsByClassName这个方法，那为什这里没有先调用原生的再调用自定义的呢？
对，原生的效率是很高，它支持多个class条件的查询，但是最大的问题是他不支持getElementsByClassName("container","div","aaa ccc")，这种在指定标签中查找指定元素为指定class的情况。
所以，这里舍弃了原生的方法调用。
关于循环优化的问题
在代码中，你会看到我将数组的length缓存了起来，这样可以提高效率。其实上，在这里有一个很隐蔽的问题，就是数组访问length属性和HtmlCollection访问length有很在的区别。在数组中，length是一个普通的属性，访问时不会进行额外的操作，在来看看HTMLCollection,我们常常将HTMLCollection当作数组来使用，但实际上，它是一个根据DOM结构自动变化的实体对象。每次访问一个HTMLCollection对象的属性时，他都会对DOM内所有的节点进行一次完整的匹配。也就是说，每次访问HtmlCollection对象的length时，都会更新一次集合对象，性能上消耗很大。所以一般情况之下，这种HtmlCollection的循环操作，都是建议缓存length的。
额外的收获
这是关于往数组里放元素的方式间，效率比较的问题
来看一下代码：
//方式一
var arr = [];
var start = new Date();
for(var i=0;i<100000;i++){
arr.push(i);
}
//方式二
var arr = [];
var start = new Date();
for(var i=0;i<100000;i++){
arr[arr.length]=i;
}
猜猜看，哪种效率更高呢！经过测试，第二种方式的效率要高于第一种。
提醒：
这个版本是不兼容IE5的，以下是我给出的解释：
1.当你从那千分之几的统计数据里，再去疯钱的IE5测试人员的点击和专业程序员对IE5的好奇心，估计就只剩IE5被焚烧后的灰烬了。
2.你要想信灰烬的利用价值趋于零
3.如果到现在还没能说服你，那我想说，你很专业!即然这样，那还有IE3,IE2,IE?FF1,NN4...，我想你应该一并实现了。
一些坦白：我也不怎么说服得了我自已，唉，还是给一个IE5的解决方案吧：
IE5并不支持getElementByTagName("*")的形式，所以在这里要处理一下：
var elements = (tagName==='*'&&node.all)?node.all:node.getElementsByTagName(tagName);
好了，不多说的，这个函数简单实用，代码上我也写了注释，看明白应该已经没有什么问题了
复制代码 代码如下:
/*
* 根据元素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<j;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<j;i++){//缓存length属性
var element = elements[i];
while(className[k++].test(element.className)){//优化循环
if(k === classNameLength){
result[result.length] = element;
break;
}
}
k = 0;
}
return result;
}
好，我们来测试一下：
复制代码 代码如下:
<div id="container">
<span class="aaa zzz ccc"></span>
<div class="aaa bbb ccc"></div>
</div>
<div class="aaa bbb ccc"></div>
复制代码 代码如下:
window.onload = function(){
alert(getElementsByClassName(document,"div","aaa ccc").length);//2
alert(getElementsByClassName("container","div","aaa ccc").length);//1
alert(getElementsByClassName("container","span","aaa zzz").length);//1
}
正确的得到了结果。
原生的getElementsByClassName
有人会问，原生的方法调用效率是最高的，有很多浏览器已经将实现了getElementsByClassName这个方法，那为什这里没有先调用原生的再调用自定义的呢？
对，原生的效率是很高，它支持多个class条件的查询，但是最大的问题是他不支持getElementsByClassName("container","div","aaa ccc")，这种在指定标签中查找指定元素为指定class的情况。
所以，这里舍弃了原生的方法调用。
关于循环优化的问题
在代码中，你会看到我将数组的length缓存了起来，这样可以提高效率。其实上，在这里有一个很隐蔽的问题，就是数组访问length属性和HtmlCollection访问length有很在的区别。在数组中，length是一个普通的属性，访问时不会进行额外的操作，在来看看HTMLCollection,我们常常将HTMLCollection当作数组来使用，但实际上，它是一个根据DOM结构自动变化的实体对象。每次访问一个HTMLCollection对象的属性时，他都会对DOM内所有的节点进行一次完整的匹配。也就是说，每次访问HtmlCollection对象的length时，都会更新一次集合对象，性能上消耗很大。所以一般情况之下，这种HtmlCollection的循环操作，都是建议缓存length的。
额外的收获
这是关于往数组里放元素的方式间，效率比较的问题
来看一下代码：
复制代码 代码如下:
//方式一
var arr = [];
var start = new Date();
for(var i=0;i<100000;i++){
arr.push(i);
}
//方式二
var arr = [];
var start = new Date();
for(var i=0;i<100000;i++){
arr[arr.length]=i;
}
猜猜看，哪种效率更高呢！经过测试，第二种方式的效率要高于第一种。
提醒：
这个版本是不兼容IE5的，以下是我给出的解释：
1.当你从那千分之几的统计数据里，再去疯钱的IE5测试人员的点击和专业程序员对IE5的好奇心，估计就只剩IE5被焚烧后的灰烬了。
2.你要想信灰烬的利用价值趋于零
3.如果到现在还没能说服你，那我想说，你很专业!即然这样，那还有IE3,IE2,IE?FF1,NN4...，我想你应该一并实现了。
一些坦白：我也不怎么说服得了我自已，唉，还是给一个IE5的解决方案吧：
IE5并不支持getElementByTagName("*")的形式，所以在这里要处理一下：
var elements = (tagName==='*'&&node.all)?node.all:node.getElementsByTagName(tagName);
好了，不多说的，这个函数简单实用，代码上我也写了注释，看明白应该已经没有什么问题了
您可能感兴趣的文章:
- javascript getElementsByClassName函数
- js document.getElementsByClassName的使用介绍与自定义函数
- js 获取class的元素的方法 以及创建方法getElementsByClassName
- javascript getElementsByClassName 和js取地址栏参数
- 使用classList来实现两个按钮样式的切换方法
- Javascript 多浏览器兼容性问题及解决方案
- IE8的JavaScript点击事件(onclick)不兼容的解决方法
- JavaScript在IE和Firefox(火狐)的不兼容问题解决方法小结
- JavaScript中解决多浏览器兼容性23个问题的快速解决方法
- JS中getElementsByClassName与classList兼容性问题解决方案分析
相关文章
在浏览器地址栏中输入一行代码：data:text/html, <html contenteditable> ，回车即可把浏览器变临时编辑器（需要浏览器支持 HTML5 属性 contenteditable）2013-11-11
这篇文章主要应用javascript代码实现文字垂直滚动的效果,需要的朋友可以参考下2015-07-07
这篇文章主要为大家详细介绍了JS实现弹幕小案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
这篇文章主要介绍了Bootstrap多级导航栏的实现代码的相关资料,需要的朋友可以参考下2016-03-03
js实现的实时柱状图,非常有创意的想法。2008-10-10
相信有C++、C#或Java等编程经验的各位，对于this关键字再熟悉不过了。由于Javascript是一种面向对象的编程语言，它和C++、C#或Java一样都包含this关键字，接下来我们将向大家介绍Javascript中的this关键字2012-08-08
这篇文章主要给大家介绍了关于JavaScript算法题之如何将一个数组旋转k步的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2022-03-03
这篇文章主要介绍了JavaScript基于面向对象实现的无缝滚动轮播,结合实例形式分析了JavaScript面向对象实现的无缝滚动轮播相关对象定义、初始化及功能实现技巧,需要的朋友可以参考下2020-01-01
本文主要通过几个实例对js中作用域进行详细解析，具有很好的参考价值。下面跟着小编一起来看下吧2017-03-03
在做项目的时候，经常会需要截取字符串，所以常用的方法有slice()、substr()、substring()、match()方法等，下面通过示例代码介绍四个方法的使用，感兴趣的朋友跟随小编一起看看吧2023-02-02
最新评论