ie8及其以下浏览器的document.getElementsByClassName兼容性问题
使用JavaScript访问DOM的一个重大问题是,此过程需要一种通过元素类名称来选择类的类函数,对DOMContentReady,这种类函数的缺失导致开发人员需要自己编写自定义脚本业执行上述任务,许多这个类脚本都是围绕着getElementByClassName()建立的,这种解决方法在HTML5中被标准化,另外,这种方法还本地存在于现代浏览器中,getElementByClassName()只使用一个字符串值作为输入.并返回一个Nodelist,这个NodeList包含所有类名称匹配这个字符串值的元素:
var el = document.getElementsByClassName('foo');
通过在字符串中使用空格分隔类,也可以匹配多个类,下面的代码挑选出了所有既拥有foo类名称又拥有bar类名称的元素:
var el = document.getElementsByClassName('foo bar');
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兼容性问题的更多相关文章
- javascript中document.getElementsByClassName兼容性封装方法一
var getElmsByClsName = function(className, results) { results = results || []; // 判断浏览器是否支持 getEleme ...
- document.getElementsByClassName在ie8及其以下浏览器的兼容性问题
原生js方法“document.getElementsByClassName”在ie8及其以下浏览器中,不能使用. 修改:加入兼容性判断,在需要用到该方法的位置修改为getClassNames方法. ...
- 原生js方法document.getElementsByClassName在ie8及其以下的兼容性问题
document.getElementsByClassName在ie8及其以下浏览器的兼容性问题,在ie8及其以下浏览器中不能使用,针对这个问题,下面给出详细的解决方法,感兴趣的朋友可以参考下 ...
- 兼容IE8以下，获取className节点的元素(document.getElementsByClassName()兼容写法)。
因为ie8一下不兼容 document.getElementsByClassName() 功能:通过class的名字获取符合条件的元素 ...
- 解决IE8下不支持document.getElementsByClassName的方法
在代码前面加如下代码: if (!document.getElementsByClassName) { document.getElementsByClassName = function (clas ...
- document.getElementsByClassName方法的重写(OVERRIDE)
众所周知,对于IE8以下的浏览器(IE8居然是WIN7预装的)没有document.getElementsByClassName,网上也有很多重写的方法,以下是本人在项目中所使用的方法 documen ...
- JS与浏览器的几个兼容性问题
第一个:有的浏览器不支持getElementsByClassName(),所以需要写一个function()来得到需要标签的class,然后进行class的增加.删除等操作. 第二个:在需要得到特定标 ...
- 浏览器对DIV+CSS兼容性问题大总结
浏览器对DIV+CSS兼容性问题大总结 接触DIV+CSS架构已经快两年了,个人觉得css入门不难,但要学精并非一朝一夕的,现在大部分网络公司都比较主张用div+css来布局,这就面临着一个比较难的问 ...
- 支持IE6、IE7、IE8等低端浏览器的简化版vue
最近研究Vue的底层原理,写了一个简化版的Vue,可以在支持IE6.IE7.IE8等低端浏览器运行.由于低端浏览器不支持对象属性定义,所以设置属性不支持直接赋值,需要调用虚拟机实例的set方法.目前只 ...
随机推荐
- poj3696 快速幂的优化+欧拉函数+gcd的优化+互质
这题满满的黑科技orz 题意:给出L,要求求出最小的全部由8组成的数(eg: 8,88,888,8888,88888,.......),且这个数是L的倍数 sol:全部由8组成的数可以这样表示:((1 ...
- UVa1636 Headshot
数据结构学得心累,做点小题换心情 原题是PDF格式查看的,贴过来好麻烦,果断放弃 已知前一次尝试结果是0,则可以得知: 下一次若仍是0,则遇到了一个00串 下一次若是1,则遇到了一个01串 SHOOT ...
- static和public的区别
static:静态. 可以设置:静态类.静态变量.静态方法. 没有使用static修饰的成员为实例成员. 静态成员的使用:通过类名. 1.不加static修饰的成员是对象成员,归每个对象所 ...
- jQuery中的text()、html()和val()以及innerText、innerHTML和value
*jQuery中设置或者获取所选内容的值:text();设置或者获取所选元素的文本内容: html();设置或者获取所选元素的内容(包括html标记): val();设置或者获取表单字段的值(前提是表 ...
- NOIp Graph 1002 瞎眼记
又是虚脱的一天啊QAQ,早上习惯性迟到,九点多到学校开始码题,六道题看下来花了将近一个小时,主要纠结于第二题和第六题.到了十点,没再深入思考,开始码题.. 一直到十一点半,写了两道题.然后吃完饭后中午 ...
- UVA1210Sum of Consecutive Prime Numbers（素数打表 + 连续和）
题目链接 题意:输入一个数n (2 <= n <= 10000) 有多少种方案可以把n写成若干个连续素数之和 打出10000之内的素数表,然后再打出每个可能得到的和的方案数的表 #incl ...
- linux查看java jdk安装路径和设置环境变量
一:查看类型 windows: set java_home:查看JDK安装路径 java -version:查看JDK版本 linux: whereis java which java (java执行 ...
- MathML + MathJax在网页中插入公式
http://www.mathjax.org/download/ http://www.w3.org/Math/Software/mathml_software_cat_editors.html ht ...
- ecshop 调用收货地址
html {insert_scripts files='region.js,utils.js'} <script type="text/javascript"> reg ...
- Quartz.NET总结（一）入门
前段时间,花了大量的时间,将原先的计划任务,切换到Quartz.NET来进行管理.原先的后台定时服务都是通过计划任务来实现的,但是随着业务增长,计划任务也越来越多,每个后台服务,都得创建一个计划任务. ...