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 参数的节点，最终返回结果