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

  1. function ieGetElementsByClassName() {
  2. if (!document.getElementsByClassName) {
  3. document.getElementsByClassName = function(className, element) {
  4. var children = (element || document).getElementsByTagName('*');
  5. var elements = new Array();
  6. for (var i = 0; i < children.length; i++) {
  7. var child = children[i];
  8. var classNames = child.className.split(' ');
  9. for (var j = 0; j < classNames.length; j++) {
  10. if (classNames[j] == className) {
  11. elements.push(child);
  12. break;
  13. }
  14. }
  15. }
  16. return elements;
  17. };
  18. }
  19. }
  20. ieGetElementsByClassName();

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

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

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

解决办法:

  1. function ieGetIdClass(id, classname) {
  2. if (document.getElementsByClassName) {
  3. if (id) {
  4. var arrId = document.getElementById(id);
  5. return arrId.getElementsByClassName(classname);
  6. } else {
  7. return document.getElementsByClassName(classname);
  8. }
  9. } else {
  10. if (id) {
  11. var arrId = document.getElementById(id);
  12. var dom = arrId.getElementsByTagName("*");
  13. var arr = [];
  14. for (var i = 0; i < dom.length; i++) {
  15. var txtArr = dom[i].className.split(" ");
  16. for (var j = 0; j < txtArr.length; j++) {
  17. if (txtArr[j] == classname) {
  18. arr.push(dom[i]);
  19. }
  20. }
  21. }
  22. return arr;
  23. }
  24. }
  25. }
  26. //用法
  27. 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. [POI2014]Salad Bar

    题目大意: 一个长度为$n(n\leq10^6)$的字符串,每一位只会是$p$或$j$.你需要取出一个子串$S$(从左到右或从右到左一个一个取出),使得不管是从左往右还是从右往左取,都保证每时每刻已取 ...

  2. source insight研究——快捷键篇

    转:http://blog.csdn.net/ison81/article/details/3510426 关于键盘和鼠标谁更快捷之争,是一个永远被程序员争论的话题.我想大多数人都不会极端的信奉一种操 ...

  3. [置顶] docker--基础镜像和dockerfile

    制作基础镜像 注意:需要在CentOS6下操作 准备工作 yum -y install febootstrap 下载ISO镜像文件到服务器 mkdir /mnt/centos6/ mount -o l ...

  4. ElasticSearch5.5.2常用命令

    1.启动 转到elasticsearch-5.5.2\bin目录: 打开命令行输入:elasticsearch 2.ELasticsearch集群已经启动并且正常运行 curl http://127. ...

  5. EF.Reverse.POCO.Core.ttinclude"

    <#@ include file="EF.Reverse.POCO.Core.ttinclude" #> <# // v2.18.1 // Please make ...

  6. Unity3D的脚本-script入门

    来自:http://blog.163.com/shininglore@126/blog/static/961841802013412101454833/ Unity3D的基本操作很容易就能掌握了,接下 ...

  7. WAMP设置

    当安装好WAMP后,windows右下角会出现WAMP Server的图标,如图所示! 当中集成了PHP开发的常用功能. Localhost:表示启动浏览器打开本地首页 My Projects:项目文 ...

  8. 打造你的前端神器-webstorm11

    说起前端编辑器,用过dw,sublime,hbuilder,webstorm也不陌生,之前的版本8有用过一下,但是觉得比sublime重量太多,但是随着后来用node的开始,发现需要打造个web前端神 ...

  9. Codeforces Round #262 (Div. 2)解题报告

    详见:http://robotcator.logdown.com/posts/221514-codeforces-round-262-div-2 1:A. Vasya and Socks   http ...

  10. Android错误之--Error retrieving parent for item: No resource found that matches the given name &#39;Theme.A

    错误提示:error: Error retrieving parent for item: No resource found that matches the given name 'Theme.A ...