IE 兼容 getElementsByClassName
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的更多相关文章
- JS兼容getElementsByClassName
getElementsByClassName是通过class来获取DOM,但是IE8及以下不能兼容.这里做了一下兼容性. HTML: <div class="pox"> ...
- IE8 兼容 getElementsByClassName
IE8以下版本没有getElementsByClassName这个方法,以下是兼容写法 function ieGetElementsByClassName() { if (!document.getE ...
- 多个table切换 getElementsByClassName
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name ...
- IE兼容问题 动态生成的节点IE浏览器无法触发
ie下click()不能操作文档中没有的节点,所以你可以在click()前添加下面的语句 document.body.appendChild( input ); input.style.display ...
- 切换tab,并且动态添加标签
<script type="text/javascript"> /*处理ie7.ie8不兼容getElementsByClassName*/ if(!document. ...
- 【Python全栈-JavaScript】JavaScript入门
JavaScript基础知识点 一.JavaScript概述 参考:http://www.w3school.com.cn/b.asp JavaScript的历史 1.1992年Nombas开发出C-m ...
- 前端开发工程师 - 03.DOM编程艺术 - 第1章.基础篇(上)
第1章.基础篇(上) Abstract:文档树.节点操作.属性操作.样式操作.事件 DOM (Document Object Model) - 文档对象模型 以对象的方式来表示对应的html,它有一系 ...
- jQuery基本选择器模块
选择器模块 1.获取元素的基本操作 案例:给页面中的div和p设置边框样式 1.1 传统方式 -获取元素并设置样式 实现思路 1 通过 标签名 获取元素 2 遍历循环 设置样式 var dvs = d ...
- js封装 DOM获取
function $(selector){ //获取第一个字符 var firstLetter = selector.charAt(0); //对第一个字符进行判断 switch(firstLette ...
随机推荐
- HDU - 4496 City 逆向并查集
思路:逆向并查集,逆向加入每一条边即可.在获取联通块数量的时候,直接判断新加入的边是否合并了两个集合,如果合并了说明联通块会减少一个,否则不变. AC代码 #include <cstdio> ...
- Java线程的六种状态
java线程有很多种状态,最主要的有六种,被创建.运行.睡眠.等待.阻塞以及消亡六种,也有很多归结为5种,把睡眠以及等待归结为冻结: 被创建:就是线程被创建,就是new thread()之后就是创建一 ...
- ARC068E - Snuke Line
原题链接 题意简述 给出个区间和.求对于任意,有多少个区间包含的倍数. 题解 考虑怎样的区间不包含的倍数. 对于的倍数和,满足的区间不包含任何的倍数. 于是转化为二维数点问题,可以用可持久化线段树解决 ...
- Hive数据倾斜总结
倾斜的原因: 使map的输出数据更均匀的分布到reduce中去,是我们的最终目标.由于Hash算法的局限性,按key Hash会或多或少的造成数据倾斜.大量经验表明数据倾斜的原因是人为的建表疏忽或业务 ...
- Pokémon Go呼应设计:让全世界玩家疯狂沉迷
引言:什么样的呼应设计会让移动游戏玩家沉迷?那必须为玩家构建一个属于玩家本人或者被玩家认可的虚拟环境,或者说是被玩家认可的虚拟世界.在移动游戏时代,想要做到这一点并不容易.但Pokémon Go却做到 ...
- Hi3531 SDK 安装以及升级使用说明
Hi3531 SDK 安装以及升级使用说明 第一章 Hi3531_SDK_Vx.x.x.x版本升级操作说明 如果您是首次安装本SDK,请直接参看第2章. 第二章 首次安装SDK 1.Hi ...
- WebService之CXF注解之一(封装类)
Teacher.java: /** * @Title:Teacher.java * @Package:com.you.model * @Description:老师封装类 * @author:Youh ...
- 新建.Net Core应用程序后引用项一直黄色感叹号怎么办?
我们在vs中创建.Net Core应用程序后,引用项可能出现黄色感叹号,正常情况下,这种黄色感叹号时能在项目创建成功之后迅速消失的,可也有些时候一直不消失,怎么办? 我们可以选中异常的项目,然后右键菜 ...
- JustMock .NET单元测试利器(一)
1.什么是Mock? Mock一词是指模仿或者效仿,用于创建实例和静态模拟.安排和验证行为.在软件开发中提及"mock",通常理解为模拟对象.模拟对象的概念就是我们想要创建一个可以 ...
- SpringBoot特性
一.SpringBoot解决的问题 1.使编码变得简单 2.使配置变得简单 3.使部署变得简单 4.使监控变得简单 二.springboot主要特性 1.遵循习惯优于配置的原则.使用springboo ...