ie8及其以下浏览器的document.getElementsByClassName兼容性问题
2014-11-29 20:59
721 查看
使用JavaScript访问DOM的一个重大问题是,此过程需要一种通过元素类名称来选择类的类函数,对DOMContentReady,这种类函数的缺失导致开发人员需要自己编写自定义脚本业执行上述任务,许多这个类脚本都是围绕着getElementByClassName()建立的,[b]这种解决方法在HTML5中被标准化,另外,这种方法还本地存在于现代浏览器中,getElementByClassName()只使用一个字符串值作为输入.并返回一个Nodelist,这个NodeList包含所有类名称匹配这个字符串值的元素:
var el = document.getElementsByClassName('foo');
通过在字符串中使用空格分隔类,也可以匹配多个类,下面的代码挑选出了所有既拥有foo类名称又拥有bar类名称的元素:
var el = document.getElementsByClassName('foo bar');[/b]
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()调用----------------------------
//------------------------------✄--这两个函数相似----------------------------//-------------------------✄--使用getElementsByClassName()调用-------------------
下面这个方法也使用了正则进行匹配的..使用document.getElementsByClassName()调用..
就介绍了这些方法,可以选用比较短小的使用,注意使用的参数…(Xee
:上面的都是一个参数(即要查询的那个class名)。)
再附录实例://---------------------------------------------------------------------✄------------------------------------------------------------------------
var el = document.getElementsByClassName('foo');
通过在字符串中使用空格分隔类,也可以匹配多个类,下面的代码挑选出了所有既拥有foo类名称又拥有bar类名称的元素:
var el = document.getElementsByClassName('foo bar');[/b]
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 .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 ); break; } } } return elements; } } onload=function(){ var els=document.getElementsByClassName('xc'); var l=els.length; for(var n=0;n<l;n++){ alert(els .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>
相关文章推荐
- document.getElementsByClassName在ie8及其以下浏览器的兼容性问题
- document.getElementsByClassName在ie8及其以下浏览器的兼容性问题
- document.getElementsByClassName在ie8及其以下浏览器的兼容性问题
- document.getElementsByClassName在ie8及其以下浏览器的兼容性问题
- document.getElementsByClassName在ie8及其以下浏览器的兼容性问题
- 原生js方法document.getElementsByClassName在ie8及其以下的兼容性问题
- 原生js document.getElementsByClassName在IE8及以下浏览器的兼容
- 进一步优化—IE8以下浏览器不支持document.getElementsByClassName() 访问节点;怎么解决?---封装自己的类名
- IE8以下浏览器不支持document.getElementsByClassName() 访问节点;怎么解决?---封装自己的类名
- document.getElementsByClassName兼容性问题
- 兼容ie5-ie11及其他主流浏览器的js document.getElementsByClassName 方法
- 解决ie8及一下不支持document.getElementsByClassName
- document.getElementsByClassName 兼容性
- document.getElementsByClassName的封装,兼容ie8
- ie8兼容问题(一) getElementsByClassName
- document.getElementsByClassName 的兼容性写法
- 原生JavaScript解决document.getElementsByClassName兼容问题
- 针对ie8等低版本浏览器document.getElementsByName方法不生效解决方法
- IE6,7,8浏览器不支持 document.getElementsByClassName
- 解决getElementsByClassName兼容性问题