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. HDU - 4545 字符串处理

    思路:对于每个字符,如果它能被替换一定要优先替换,其次再进行删除.遵循这个策略即可. 证明: 对于这题的第一个测试数据: abba addba 1 d b 当匹配到'b'  和 'd'时应该优先替换而 ...

  2. postman 中调试接口的小记录

    1.form-data:  就是http请求中的multipart/form-data,它会将表单的数据处理为一条消息,以标签为单元,用分隔符分开.既可以上传键值对,也可以上传文件.当上传的字段是文件 ...

  3. docker 数据卷之进阶篇

    笔者在<Docker 基础 : 数据管理>一文中介绍了 docker 数据卷(volume) 的基本用法.随着使用的深入,笔者对 docker 数据卷的理解与认识也在不断的增强.本文将在前 ...

  4. JS-随机生成的密码

    randPassword(size) =>{ //数组 let seed = new Array('A','B','C','D','E','F','G','H','I','J','K','L', ...

  5. Storm日志分析调研及其实时架构

    1.Storm第一个Demo 2.Windows下基于eclipse的Storm应用开发与调试 3.Storm实例+mysql数据库保存 4.Storm原理介绍 5. flume+kafka+stor ...

  6. mysql打不开表问题解决方案

    做开发时候某一表怎么也打不开,数据也不多,网上查了按下面这篇文章完美解决,但是要记得用root登录mysql: 记一次MySQL中Waiting for table metadata lock的解决方 ...

  7. 在Ubuntu16.04.4上安装jdk

    在Ubuntu16.04.4上安装jdk 一.安装步骤     1.下载jdk安装包     首先我们在oracle官网上下载jdk-8u161-linux-x64.tar.gz,当然也可以下载其他版 ...

  8. R语言实现︱局部敏感哈希算法(LSH)解决文本机械相似性的问题(二,textreuse介绍)

    每每以为攀得众山小,可.每每又切实来到起点,大牛们,缓缓脚步来俺笔记葩分享一下吧,please~ --------------------------- 上一篇(R语言实现︱局部敏感哈希算法(LSH) ...

  9. 小说接入UC浏览器内核技术对话(二)

    质辛@灿岩 质辛跟我们说一下那个删除文件的逻辑吧质辛@灿岩  应该不是删除cache下所有文件吧?质辛质辛@智鹰  提供一下我们的临时文件完整路径给 灿岩吧质辛@智鹰  是负责我们ucsdk的 技术对 ...

  10. DML 触发器2

    2.行级触发器的关联标识符 :new,:old >>1. 一般通过:new.filed 引用(filed是trigger_table的字段名) :new :old中filed字段的意义 触 ...