我的getElementsByClassName实现
先来看一下代码:(支持多个class查询和在某个范围内进行查询)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | /* * 根据元素clsssName得到元素集合 * @param fatherId 父元素的ID,默认为document * @tagName 子元素的标签名 * @className 用空格分开的className字符串 */ function getElementsByClassName(fatherId,tagName,className){ var 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; } |
好,我们来测试一下:
1 2 3 4 5 | <div id= "container" > <span class = "aaa zzz ccc" ></span> <div class = "aaa bbb ccc" ></div> </div> <div class = "aaa bbb ccc" ></div> |
1 2 3 4 5 | 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 } |
正确的得到了结果。
关于class属性
1.一个元素可以带有多个class属性值,它们通过空格分隔, 例:class='aa bb cc'。
2.class属性值是可以包含'-'这个字符的,如:class='a-b',特别强调是因为在正则表达式中'-'是一个特殊字符。
3.在javascript中通过的获取class属性值的方式为element.className。
原生的getElementsByClassName
有人会问,原生的方法调用效率是最高的,有很多浏览器已经将实现了getElementsByClassName这个方法,那为什这里没有先调用原生的再调用自定义的呢?
对,原生的效率是很高,它支持多个class条件的查询,但是最大的问题是他不支持getElementsByClassName("container","div","aaa ccc"),这种在指定标签中查找指定元素为指定class的情况。
所以,这里舍弃了原生的方法调用。
关于循环优化的问题
在代码中,你会看到我将数组的length缓存了起来,这样可以提高效率。其实上,在这里有一个很隐蔽的问题,就是数组访问length属性和HtmlCollection访问length有很在的区别。在数组中,length是一个普通的属性,访问时不会进行额外的操作,在来看看HTMLCollection,我们常常将HTMLCollection当作数组来使用,但实际上,它是一个根据DOM结构自动变化的实体对象。每次访问一个HTMLCollection对象的属性时,他都会对DOM内所有的节点进行一次完整的匹配。也就是说,每次访问HtmlCollection对象的length时,都会更新一次集合对象,性能上消耗很大。所以一般情况之下,这种HtmlCollection的循环操作,都是建议缓存length的。
额外的收获
这是关于往数组里放元素的方式间,效率比较的问题
来看一下代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 | //方式一 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);
好了,不多说的,这个函数简单实用,代码上我也写了注释,看明白应该已经没有什么问题了
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步