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. Centos7下,简单DOCKER 使用.映射SSH端口到宿主主机.

    其实使用docker完全没有必要ssh,初学的时候,可以这样熟悉以下操作. 参考这哥们的文章:http://www.jianshu.com/p/d2dd936863ec 获取镜像 docker pul ...

  2. 转 Caffe学习系列(12):训练和测试自己的图片

    学习caffe的目的,不是简单的做几个练习,最终还是要用到自己的实际项目或科研中.因此,本文介绍一下,从自己的原始图片到lmdb数据,再到训练和测试模型的整个流程. 一.准备数据 有条件的同学,可以去 ...

  3. APICloud常用模块

    常用模块 基础 fs db 支付 wxPay aliPay unionPay 消息 ajpush rongCloud2

  4. 【php】DIRECTORY_SEPARATOR的作用

    DIRECTORY_SEPARATOR是php的内部常量,用于显示系统分隔符的命令,不需要任何定义与包含即可直接使用. 在windows下路径分隔符是/(当然/在部分系统上也是可以正常运行的),在li ...

  5. HighCharts之2D带Label的折线图

    HighCharts之2D带Label的折线图 1.HighCharts之2D带Label的折线图源码 LineLabel.html: <!DOCTYPE html> <html&g ...

  6. Netty未来展望

    作为<Netty权威指南(第2版)>的结尾章节,和读者朋友们一起展望下Netty的未来. 1应用范围 随着大数据.互联网和云计算的发展,传统的垂直架构逐渐将被分布式.弹性伸缩的新架构替代. ...

  7. Linux显示所有可更新的软件清单命令

    Linux显示所有可更新的软件清单命令 youhaidong@youhaidong-ThinkPad-Edge-E545:~$ yum check-update 程序"yum"尚未 ...

  8. require()的工作流程

    require()的工作流程 当require()里传递一个参数x时,会有以下情况: x是一个文件 x是一个路径 eg. 当x为/home/dk/project/app 依次搜索以下的node_mod ...

  9. 机器学习相关的tutorial

    1. MRF 马尔可夫随机场 http://homepages.inf.ed.ac.uk/rbf/CVonline/LOCAL_COPIES/AV0809/ORCHARD/ 从MRF,讲到Gibbs分 ...

  10. iOS - CALayer 绘图层

    1.CALayer 绘图层 在 iOS 系统中,你能看得见摸得着的东西基本上都是 UIView,比如一个按钮.一个文本标签.一个文本输入框.一个图标等等,这些都是 UIView.其实 UIView 之 ...