（Xee：因为我要兼容IE8浏览器… 这里有几个比较高效的方法,它们会先检测是否支持getElementsByClassName，支持了就使用原生的该方法…）
//-----------------------------?---经过修正之后的--------------------------------------
//------------------------------?--使用document.getElementsByClassName()调用----------------------------
if(!document.getElementsByClassName){ document.getElementsByClassName = function(className){ var children = document.getElementsByTagName(‘*‘); var elements = new Array(); for (var i=0; i<children.length; i++){ var child = children[i]; var classNames = child.className.split(‘ ‘); for (var j=0; j<classNames.length; j++){ if (classNames[j] == className){ elements.push(child); break; } } } return elements; }; } //------------------------------?--这两个函数相似----------------------------
//-------------------------?--使用getElementsByClassName()调用------------------- function getElementsByClassName(strClass){ if(document.getElementsByClassName){ return document.getElementsByClassName(strClass); } strClass=strClass.replace(/^ +| +$/g,""); var aClass=strClass.split(/ +/); var eles=document.getElementsByTagName("*"); for(var i=0;i<aClass.length;i++){ var a=[] var reg=new RegExp("(^| )"+aClass[i]+"( |$)"); for(var j=0;j<eles.length;j++){ var ele=eles[j]; if(reg.test(ele.className)){ a.push(ele); } } eles=a; } return eles; }
下面这个方法也使用了正则进行匹配的..使用document.getElementsByClassName()调用..
/* 为IE6 IE7 IE8增加document.getElementsByClassName函数 */ /MSIE\s*(\d+)/i.test(navigator.userAgent); var isIE=parseInt(RegExp.$1?RegExp.$1:0); if(isIE>0&&isIE<9){ document.getElementsByClassName=function(cls){ var els=this.getElementsByTagName(‘*‘); var ell=els.length; var elements=[]; for(var n=0;n<ell;n++){ var oCls=els[n].className||‘‘; if(oCls.indexOf(cls)<0) continue; oCls=oCls.split(/\s+/); var oCll=oCls.length; for(var j=0;j<oCll;j++){ if(cls==oCls[j]){ elements.push(els[n]); break; } } } return elements; } } onload=function(){ var els=document.getElementsByClassName(‘xc‘); var l=els.length; for(var n=0;n<l;n++){ alert(els[n].outerHTML); } }
就介绍了这些方法，可以选用比较短小的使用，注意使用的参数…（Xee
:上面的都是一个参数（即要查询的那个class名）。）
再附录实例：//---------------------------------------------------------------------?------------------------------------------------------------------------
<!DOCTYPE html> <html lang="zh" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title>用原生JS获取CLASS对象</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="generator" content="EverEdit" /> <meta name="author" content="" /> <meta name="keywords" content="" /> <meta name="description" content="" /> </head> <body> <div id="w2" class="test"> <span class="test"></span> </div> <div id="w1" class="test"> <div id="ce" class="test"> <ul> <li class="q">qw1</li> <li class="q">qw2</li> <li class="ww">ww</li> <li class="a">a</li> <li class="bbb">bbb</li> <li></li> <li></li> <li></li> </ul> </div> </div> <script type="text/javascript"> if(!document.getElementsByClassName){ document.getElementsByClassName = function(className){ var children = document.getElementsByTagName(‘*‘); var elements = new Array(); for (var i=0; i<children.length; i++){ var child = children[i]; var classNames = child.className.split(‘ ‘); for (var j=0; j<classNames.length; j++){ if (classNames[j] == className){ elements.push(child); break; } } } return elements; }; } document.getElementsByClassName("ww")[0].style.color=‘red‘; //演示：查找css类名为"ww"的标签个数 </script> </body> </html>
ie8及其以下浏览器的document.getElementsByClassName兼容性问题
原文：http://www.cnblogs.com/ChandlerVer5/p/4131988.html