六(2).自己动手生产一个getElementsByClass()函数
JavaScript DOM Tutorials
六.W3C DOM之旅的第一步,文档访问 .第二节.自己动手生产一个getElementsByClass()函数
3. getElementsByClass() # 通过类名查找元素
getElementsByClass()方法,内建的DOM函数中并没有提供用来实现按类名查找元素的方法,因此我们需要自己动手生产一个函数来完成这一功能。
只要把编写好的getElementsByClass()函数放在我们的js文件里或者封装到我们自己的库里,积少成多就有了像Prototype,jQuery,Mootools一样的JavaScript Library了。在我们编写任何JavaScript代码的时候,都可以将类名作为参数使用该函数查找元素组了.
完整的getElementsByClass()函数
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 30 31 32 33 34 35 36 37 38 39 | function $(element){ if(arguments.length>1){ for(var i=0,elements=[],length=arguments.length;i<length;i++){ elements.push($(arguments[i])); } return elements; } //如果该参数是一个字符串那假设它是一个id if(typeof element=="string") { return document.getElementById(element); }else{ return element; } } /* 第一个参数CSS类名,第二个参数父对象,第三个参数标签名(eg "div"、"li") 其中第一个参数必选,第二个第三个参数可选 */ document.getElementsByClassName=function(className,parentElement,tagName) { var children = ($(parentElement)||document.body).getElementsByTagName(tagName||'*');//兼容IE5.x以上的版本和FF的判断 //var children =document.all?document.all:document.getElementsByTagName("*");//兼容IE5.x版本和FF的判断 var elements = [],child; for (var i=0,length=children.length;i<length;i++) { child = children[i]; if (hasClassName(child,className)) elements.push(child); } return elements; }; //判断对象element是否包含指定类className function hasClassName(element,className) { if (!(element=$(element))) return false; var elementClassName=element.className; if (elementClassName.length == 0) return false; if (elementClassName==className||elementClassName.match(new RegExp("(^|\\s)"+className+"(\\s|$)"))) return true; return false; } |
测试:
相同类名的div元素
1 2 3 4 5 | <div class="c">aaaaa</div> <div class="c">bbbbb</div> <div class="c">ccccc</div> <div class="c">ddddd</div> <div class="c">eeeee</div> |
通过getElementsByClass()函数,查找有相同类名的div元素组。
1 2 3 4 5 6 7 8 | //测试 var className=document.getElementsByClassName("c"); if(typeof className!="undefined"){ for(var i=0;i<className.length;i++){ alert(className[i].innerHTML); } } |
完整的getElementsByClass()函数的第二种实现方式
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 30 31 32 33 34 | //getElementsByClass()函数的第二种实现方式 document.getElementsByClassName=function(className){ var allArray=new Array(); var elements=new Array(); if(typeof document.all!="undefined"){ allArray=document.all;//返回文档中的所有元素 }else{ allArray=document.getElementsByTagName("*");//返回文档中的所有元素 } for(var i=0;i<allArray.length;i++){ var isClassName=hasClassName(allArray[i],className); if (isClassName){ elements.push(allArray[i]); } } return elements; }; //判断对象element是否包含指定类className function hasClassName(element,className) { var elementClassName=element.className; if (elementClassName.length == 0) return false; if (elementClassName==className||elementClassName.match(new RegExp("(^|\\s)"+className+"(\\s|$)"))) return true; return false; } |
请教一下,请问第二种方法的后面那个正则表达式匹配的是什么呢?
elementClassName.match(new RegExp("(^|\\s)"+className+"(\\s|$)")) match() 方法可在字符串内检索指定的值,或找到一个或多个正则表达式的匹配。 这个正则表达式的含义是首先是匹配一个字符串的开始和空白字符,然后是类名,最后是匹配一个空白字符和字符串的结束。