getElementsByClassName 通过class获取节点,是很多新人练习原生JS都用到的,项目中也会写,当项目进行到一定程度时,测试IE低版本,忽然发现不支持的时候,瞬间感觉整个人都不好了。别急,下面的代码贴入项目中就OK,支持 IE8 ;  注: IE6、IE7未能完美解决,不支持动态添加节点

//基于 IE 对 getElementsByClassName 的支持
(function(CN){
if( !(CN in document) ){ document[CN] = function(cname){
var reg = new RegExp("(^|\\s)"+ cname +"(\\s|$)"), //匹配 class 正则
tag = this.getElementsByTagName("*"),
elementArr = cname==="*" ? tag : []; if( !elementArr.length ) //参数不为 * , 才走节点遍历
for (var i=; i<tag.length; i++) {
reg.test( tag[i].className ) && elementArr.push( tag[i] );
};
return elementArr;
} if( "Element" in window ){//IE8 Element.prototype[CN] = document[CN];
}else{//IE7 IE6 for(var j=; j<document.all.length; j++){
document.all[j][CN] = document[CN];
}
}
}
})( "getElementsByClassName" );

//测试
var a = document.getElementsByClassName("a1");
var b = a[].getElementsByClassName("b1");
alert(b[].innerHTML);
alert(b[].innerHTML);

实现方式:
  1. 通过 this 找到 DOM 当前位置,用 getElementsByTagName 获取 DOM 当前位置下面所有的节点。
  2. 遍历节点,使用正则匹配符合 class 参数的节点,最终返回结果

IE 兼容 getElementsByClassName的更多相关文章

  1. JS兼容getElementsByClassName

    getElementsByClassName是通过class来获取DOM,但是IE8及以下不能兼容.这里做了一下兼容性. HTML: <div class="pox"> ...

  2. IE8 兼容 getElementsByClassName

    IE8以下版本没有getElementsByClassName这个方法,以下是兼容写法 function ieGetElementsByClassName() { if (!document.getE ...

  3. 多个table切换 getElementsByClassName

    <!doctype html> <html> <head> <meta charset="utf-8"> <meta name ...

  4. IE兼容问题 动态生成的节点IE浏览器无法触发

    ie下click()不能操作文档中没有的节点,所以你可以在click()前添加下面的语句 document.body.appendChild( input ); input.style.display ...

  5. 切换tab,并且动态添加标签

    <script type="text/javascript"> /*处理ie7.ie8不兼容getElementsByClassName*/ if(!document. ...

  6. 【Python全栈-JavaScript】JavaScript入门

    JavaScript基础知识点 一.JavaScript概述 参考:http://www.w3school.com.cn/b.asp JavaScript的历史 1.1992年Nombas开发出C-m ...

  7. 前端开发工程师 - 03.DOM编程艺术 - 第1章.基础篇(上)

    第1章.基础篇(上) Abstract:文档树.节点操作.属性操作.样式操作.事件 DOM (Document Object Model) - 文档对象模型 以对象的方式来表示对应的html,它有一系 ...

  8. jQuery基本选择器模块

    选择器模块 1.获取元素的基本操作 案例:给页面中的div和p设置边框样式 1.1 传统方式 -获取元素并设置样式 实现思路 1 通过 标签名 获取元素 2 遍历循环 设置样式 var dvs = d ...

  9. js封装 DOM获取

    function $(selector){ //获取第一个字符 var firstLetter = selector.charAt(0); //对第一个字符进行判断 switch(firstLette ...

随机推荐

  1. java.net.UnknownHostException

    java.net.UnknownHostException 错误解决方向 查看 测试真机或者模拟机是否连上了网络.     如果不是第一步错误的话,一般就是测试机没有链接上网络,可以打开个网页或者其他 ...

  2. JVM笔记5-对象的访问定位。

    java虚拟机中指定一个栈内存的引用指向了堆内存中的对象.这样说只是笼统的说法.而指向堆内存中的对象就一定是栈引用所需要的那个对象吗?其实并不定. 这就需要知道对象的访问定位方式有两种: 1.使用句柄 ...

  3. Spark源码编译(未完待续)

    在这里我们不需要搭建独立的Spark集群,利用Yarn Client调用Hadoop集群的计算资源. Spark源码编译生成配置包: 解压源码,在根去根目录下执行以下命令(sbt编译我没尝试) ./m ...

  4. js中reduce()用法

    reduce()方法 定义:reduce()接收一个函数作为累加器,数组中每个值(从左到右)开始缩减,最终计算为一个值 对于空数组不执行回调函数 语法:array.reduce(function(to ...

  5. 质量管理:PDCA循环

    PDCA循环又叫质量环,是管理学中的一个通用模型,最早由休哈特于1930年构想,后来被美国质量管理专家戴明博士在1950年再度挖掘出来,并加以广泛宣传和运用于持续改善产品质量的过程.[1] 中文名 P ...

  6. 不使用spring的情况下用java原生代码操作mongodb数据库的两种方式

    由于更改了mongodb3.0数据库的密码,导致这几天storm组对数据进行处理的时候,一直在报mongodb数据库连接不上的异常.   主要原因实际上是和mongodb本身无关的,因为他们改的是配置 ...

  7. 一道bfs与邻接表应用题

    Problem Description 终于有一天,王元姬用他的劫打上了最强王者.他号称,他从来不会在偶数段位停留,因为他的实力太强会跳段(这个13我给满分).傲娇棠和翔妹觉得他的13装的都比勇哥哥好 ...

  8. 促进客户转化,提高客单价!酷客多小程序发布版本V1.0.9!

    商户和企业主的又一次福音!酷客多小程序新零售o2o商城系统酷爱用户,为了追求极致的用户体验,没日没夜地沉浸于新功能的开发,经过一番努力,新功能终于上线啦! 此次版本迭代,在原有功能基础上做了大幅提升, ...

  9. 深度学习框架: Keras官方中文版文档正式发布

    今年 1 月 12 日,Keras 作者 François Chollet‏ 在推特上表示因为中文读者的广泛关注,他已经在 GitHub 上展开了一个 Keras 中文文档项目.而昨日,Françoi ...

  10. 戏说java多线程之CyclicBarrier(循环栅栏)的CyclicBarrier(int parties)构造方法

    CyclicBarrier是JDK 1.5 concurrent包出现的一个用于解决多条线程阻塞,当达到一定条件时一起放行的一个类.我们先来看这样一个简单的需求. 现在我有一个写入数据的类,继承Run ...