IE8以下版本没有getElementsByClassName这个方法,以下是兼容写法

function ieGetElementsByClassName() {
if (!document.getElementsByClassName) {
document.getElementsByClassName = function(className, element) {
var children = (element || 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;
};
}
}
ieGetElementsByClassName();

这个方法会在IE8浏览器的document上挂载getElementsByClassName方法,但是存在一个问题:

有一个已经获取到的元素,再通过类名获取子元素时会报错,比如

var idDom = document.getElementById(id)
idDom.getElementsByClassName(class) //idDom没有getElementsByClassName方法,会报错

解决办法:

function ieGetIdClass(id, classname) {
if (document.getElementsByClassName) {
if (id) {
var arrId = document.getElementById(id);
return arrId.getElementsByClassName(classname);
} else {
return document.getElementsByClassName(classname);
}
} else {
if (id) {
var arrId = document.getElementById(id);
var dom = arrId.getElementsByTagName("*");
var arr = [];
for (var i = 0; i < dom.length; i++) {
var txtArr = dom[i].className.split(" ");
for (var j = 0; j < txtArr.length; j++) {
if (txtArr[j] == classname) {
arr.push(dom[i]);
}
}
}
return arr;
}
}
} //用法
var doms = ieGetIdClass(id,class) //获取id元素下的所有class子元素

做学习用,开发中建议使用jQuery

IE8 兼容 getElementsByClassName的更多相关文章

  1. ie8兼容

    最近在做ie8兼容,把遇到的问题整理了一下 1. margin:0 auto; 无法居中 解决方法:1.换成h4的文档类型 <!DOCTYPE html PUBLIC "-//W3C/ ...

  2. 360兼容模式==ie8 兼容模式下 span标签占位问题

    ie8 兼容模式 ie8 标准渲染 应付金额 穿位 错误代码 <span class="span_em">应付金额:<em><span style=& ...

  3. IE8兼容placeholder的方案

    用JavaScript解决Placeholder的IE8兼容问题 placeholder属性是HTML5新添加的属性,当input或者textarea设置了该属性后,该值的内容将作为灰色提示显示在文本 ...

  4. ie8兼容圆角

    ie8兼容圆角 PIE.HTC下载地址:http://css3pie.com/ 兼容ie8 代码如下: <!DOCTYPE html> <html> <head> ...

  5. 使用X-UA-Compatible来设置IE8兼容模式

    使用X-UA-Compatible来设置IE8兼容模式 本文向大家描述一下如何使用X-UA-Compatible来设置IE8兼容模式,X-UA-Compatible是针对IE8兼容模式,X-UA-Co ...

  6. prototype.js的Ajax对IE8兼容问题解决方案

    你是否遇到过这样的问题?在使用protype.js的Ajax应用时,会出现这样的问题:只要调用了Ajax.Request,然后点该页面右键,查看“属性”就弹出“IE停止工作”的对话框,然后强制重新加载 ...

  7. javascript ie8兼容 a标签href javascript:void(0);

    ie8兼容 a标签href javascript:void(0); 尽量不要用javascript:协议做为A的href属性,这样不仅会导致不必要的触发window.onbeforeunload事件;

  8. react 开发 PC 端项目(一)项目环境搭建 及 处理 IE8 兼容问题

    步骤一:项目环境搭建 首先,你不应该使用 React v15 或更高版本.使用仍然支持 IE8 的 React v0.14 即可. 技术选型: 1.react@0.14 2.bootstrap3 3. ...

  9. H5C3--语义标签以及语义标签IE8兼容,表单元素新属性,度量器,自定义属性,dataList,网络监听,文件读取

    HTML5新增标签以及HTML5新增的api     1.H5并不是新的语言,而是html语言的第五次重大修改--版本     2.支持:所有的主流浏览器都支持h5.(chrome,firefox,s ...

随机推荐

  1. [BZOJ 2957]楼房重建(THU2013集训)(线段树维护单调栈)

    题目:http://www.lydsy.com/JudgeOnline/problem.php?id=2957 分析: 根据题意,就是比较斜率大小 只看一段区间的话,那么这段区间能看见的楼房数量就是这 ...

  2. Android Activity为什么要细化出onCreate、onStart、onResume、onPause、onStop、onDesdroy这么多方法让应用去重载?

    原文:http://www.xuebuyuan.com/1608083.html 最近在研究Activity的启动流程,老罗的blog在看,也找了其它资料学习,也跟过Android4.3的源码, 在跟 ...

  3. Android开发实践:Java层与Jni层的数组传递

    转载:http://www.linuxidc.com/Linux/2014-03/97561.htm Android开发中,经常会在Java代码与Jni层之间传递数组(byte[]),一个典型的应用是 ...

  4. 自动化安装SQLSERVER和SQLSERVER补丁 转

    2014-01-23 18:31  您还在用下一步下一步的方式安装SQLSERVER和SQLSERVER补丁吗? 介绍 假如你有50台服务器需要安装SQLSERVER,如果你用下一步下一步的方式,用远 ...

  5. C/C++框架和库 (真的很强大) 转

    http://blog.csdn.net/xiaoxiaoyeyaya/article/details/42541419     值得学习的C语言开源项目 - 1. Webbench Webbench ...

  6. Visio中插入公式

    也可以直接插入MathType公式,我原来的word不显示MathType,现在显示了,不过插入后太小,那是因为字体小,拖动托大就行. 在word中插入-对象-公式3.0对象(安装MathType后, ...

  7. linux之ifconfig命令

    1.命令格式: ifconfig [网络设备] [参数] 2.命令功能: ifconfig 命令用来查看和配置网络设备.当网络环境发生改变时可通过此命令对网络进行相应的配置. 3.命令参数: up 启 ...

  8. 50个最常用的UNIX/Linux命令

    转自http://get.jobdeer.com/493.get 1. tar command examples Create a new tar archive. $ tar cvf archive ...

  9. c#中的构造方法

    c#基础--类的构造方法   当实例化一个类时,系统会自动对这个类的属性进行初始化 数字型初始化成0/0.0 string类型初始化成null char类型初始化成\0 构造器就是构造方法,能够被重载 ...

  10. 用JS怎么判断上传文件控件是否未选择文件

    页面代码: <form name="form1" action="uploadPosdetailFile.html" method="post& ...