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=0; 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=0; j<document.all.length; j++){
        document.all[j][CN] = document[CN];
      }
    }
  }
})( "getElementsByClassName" );

//测试
var a = document.getElementsByClassName("a1"); var b = a[0].getElementsByClassName("b1"); alert(b[0].innerHTML); alert(b[1].innerHTML);

实现方式:
  1. 通过 this 找到 DOM 当前位置,用 getElementsByTagName 获取 DOM 当前位置下面所有的节点。
  2. 遍历节点,使用正则匹配符合 class 参数的节点,最终返回结果

posted @ 2015-11-15 17:22  魔蝎  阅读(282)  评论(0)    收藏  举报