首页 > 代码库 > ie8及其以下浏览器的document.getElementsByClassName兼容性问题
ie8及其以下浏览器的document.getElementsByClassName兼容性问题
Google Chrome、Firefox、Opera、Safari、IE9及更新版本都支持javascript的document.getElementsByClassName函数，而IE6 IE7 IE8不支持document.getElementsByClassName，我们只能自己给document增加一个自定义函数getElementsByClassName，让IE 6-8也支持document.getElementsByClassName 以下是IE6 IE7 IE8 document.getElementsByClassName的代码及实例。
（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兼容性问题
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。