六（2）.自己动手生产一个getElementsByClass()函数

六.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 ;   }