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 - 1846 Brave Game 巴什博弈
思路:直接判断n是不是m+1的倍数,若是先手则输,否则赢. AC代码 #include <cstdio> #include <cmath> #include <algor ...
- 原生javascript 的MAP使用
var map = {}; // Map map = new HashMap();map[key] = value; // map.put(key, value);var value = map[ke ...
- NewLife.XCode 上手指南2018版(二)增
目录 NewLife.XCode 上手指南2018版(一)代码生成 NewLife.XCode 上手指南2018版(二)增 NewLife.XCode 上手指南2018版(三)查 NewLife.XC ...
- java:替换字符串中的ASCII码
可对照查看网盘ASCII表http://yunpan.cn/cyxg4wQjQaGEQ (提取码:8b29) public static void main(String[] args) { // / ...
- chrome浏览器Timing内各字段解析
Queueing请求文件顺序的的排序 Stalled是浏览器得到要发出这个请求的指令到请求可以发出的等待时间,一般是代理协商.以及等待可复用的TCP连接释放的时间,不包括DNS查询.建立TCP连接 ...
- Python中从B类中调用A类的方法。
好久没上了,Python还在学--最近进度有点慢... 下面代码记录了一个不太好理解的点,自己写了个小例子,总算是理顺了. B类想要调用A类,自己在网上看了一下其他人的回复:创建A类的实例,直接调用这 ...
- css进行中打点效果
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- Hi3531支持2GByte内存
型号为K4B4G1646B-HCKO 1.修改DDRC_RNKCFG 为 0x142 2.修改arch/arm/mach-godnet/include/mach/vmalloc.h 扩大 vmallo ...
- PCI设备内存操作函数总结
1. ExAllocatePool() 函数说明: ExAllocatePool allocates pool memory of the specified type and returns a ...
- zTree实现更新根节点中第i个节点的名称
zTree实现更新根节点中第i个节点的名称 1.实现源码 <!DOCTYPE html> <html> <head> <title>zTree实现基本树 ...