javascript getElementsByClassName实现代码


Posted in Javascript onOctober 11, 2010

先来看一下代码:(支持多个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);
好了,不多说的,这个函数简单实用,代码上我也写了注释,看明白应该已经没有什么问题了
Javascript 相关文章推荐
jquery 弹出层实现代码
Oct 30 Javascript
jquery封装的对话框简单实现
Jul 21 Javascript
js为什么不能正确处理小数运算?
Dec 29 Javascript
DOM操作和jQuery实现选项移动操作的简单实例
Jun 07 Javascript
jQuery实现可拖拽的许愿墙效果【附demo源码下载】
Sep 14 Javascript
jQuery UI 实例讲解 - 日期选择器(Datepicker)
Sep 18 jQuery
利用JS测试目标网站的打开响应速度
Dec 01 Javascript
vue-cli2.9.3 详细教程
Apr 23 Javascript
vue better scroll 无法滚动的解决方法
Jun 07 Javascript
详解vue-cli@2.x项目迁移日志
Jun 06 Javascript
浅入深出Vue之自动化路由
Aug 06 Javascript
Vue清除定时器setInterval优化方案分享
Jul 21 Javascript
javascript Array.prototype.slice使用说明
Oct 11 #Javascript
javascript 伪数组实现方法
Oct 11 #Javascript
javascript forEach通用循环遍历方法
Oct 11 #Javascript
JavaScript 操作键盘的Enter事件(键盘任何事件),兼容多浏览器
Oct 11 #Javascript
JavaScript isArray()函数判断对象类型的种种方法
Oct 11 #Javascript
JSChart轻量级图形报表工具(内置函数中文参考)
Oct 11 #Javascript
jQuery 表单验证扩展代码(一)
Oct 11 #Javascript
You might like
用PHP创建PDF中文文档
2006/10/09 PHP
浅谈PHP与C#的值类型指向区别的详解
2013/05/21 PHP
Zend Framework入门教程之Zend_Config组件用法详解
2016/12/09 PHP
详解PHP中的外观模式facade pattern
2018/02/05 PHP
php框架CodeIgniter主从数据库配置方法分析
2018/05/25 PHP
Yii2框架实现登陆添加验证码功能示例
2018/07/12 PHP
非常漂亮的JS代码经典广告
2007/10/21 Javascript
JavaScript在IE中“意外地调用了方法或属性访问”
2008/11/19 Javascript
dreamweaver 8实现Jquery自动提示
2014/12/04 Javascript
JavaScript中this的四个绑定规则总结
2016/09/26 Javascript
老生常谈Bootstrap媒体对象
2017/07/06 Javascript
vue.js项目 el-input 组件 监听回车键实现搜索功能示例
2018/08/25 Javascript
JavaScript 扩展运算符用法实例小结【基于ES6】
2019/06/17 Javascript
javascript实现商品图片放大镜
2019/11/28 Javascript
微信小程序向Java后台传输参数的方法实现
2020/12/10 Javascript
原生js实现自定义滚动条
2021/01/20 Javascript
python计数排序和基数排序算法实例
2014/04/25 Python
Python自定义scrapy中间模块避免重复采集的方法
2015/04/07 Python
详解Python中的各种函数的使用
2015/05/24 Python
python 读写文件,按行修改文件的方法
2018/07/12 Python
Python列表推导式与生成器用法分析
2018/08/02 Python
Python代码实现删除一个list里面重复元素的方法
2019/04/02 Python
python保留小数位的三种实现方法
2020/01/07 Python
浅谈pytorch 模型 .pt, .pth, .pkl的区别及模型保存方式
2020/05/25 Python
python 通过 pybind11 使用Eigen加速代码的步骤
2020/12/07 Python
巧用CSS3的calc()宽度计算做响应模式布局的方法
2018/03/22 HTML / CSS
css3新单位vw、vh的使用教程
2018/03/23 HTML / CSS
意大利香水和化妆品购物网站:Parfimo.it
2019/10/06 全球购物
adidas泰国官网:adidas TH
2020/07/11 全球购物
仓库管理专业个人的自我评价
2013/12/30 职场文书
小学生环保倡议书
2014/05/15 职场文书
vue+elementui 实现新增和修改共用一个弹框的完整代码
2021/06/08 Vue.js
详解JVM系列之内存模型
2021/06/10 Javascript
Springboot使用Spring Data JPA实现数据库操作
2021/06/30 Java/Android
Android 界面一键变灰 深色主题工具类
2022/04/28 Java/Android
django项目、vue项目部署云服务器的详细过程
2022/07/23 Servers