getElementsByClassName兼容IE6/7/8的实现方法

all know: 除IE8及以下版本,getElementsByClassName方法在所有浏览器中都实现了。

本文来分析总结下不同框架或库中,getElementsByClassName的兼容IE8-的实现方法。

框架:NEJ, kissy

库: jQuery

一、NEJ框架的实现方法



__getElementsByClassName = function(_element,_class){
    var _result = [],
        _regexp = new RegExp(‘(\\s|^)(?:‘+_class.replace(/\s+/g,‘|‘)+‘)(?=\\s|$)‘);
    _u._$forEach(
        _element.getElementsByTagName(‘*‘),
        function(_node){
            if (_regexp.test(_node.className)){
                _result.push(_node);
            }
        }
    );
    return _result;
};

二、在网友 Ruby’s Louvre 的一篇总结的基础上稍加改进,并调试通过 得到的一种方法:


/* 第一个参数是必须的,后两个参数是可选的,兼容IE6/7/8 */
var getElementsByClassName = function (searchClass, node,tag) {

  if(document.getElementsByClassName){
    var nodes =  (node || document).getElementsByClassName(searchClass),result = [];
      for(var i=0 ;node = nodes[i++];){
      	if(!!tag){
	        if(tag !== "*" && node.tagName === tag.toUpperCase()){
	          result.push(node);
	        }
	    }else{
	    	result.push(node);
	    }
      }
      return result;
    }else{
      node = node || document;
      tag = tag || "*";
      var result = [];
      var classes = searchClass.split(" "),
      elements = (tag === "*" && node.all)? node.all : node.getElementsByTagName(tag),
      patterns = [],
      current,
      match;
      var i = classes.length;
      while(--i >= 0){
        patterns.push(new RegExp("(^|\\s)" + classes[i] + "(\\s|$)"));
      }
      var j = elements.length;
      while(--j >= 0){
        current = elements[j];
        match = false;
        for(var k=0,n=0, kl=patterns.length; k<kl; k++){
          match = patterns[k].test(current.className);
          if (match)  n++;
        }
        if(n == kl){
        	result.push(current);
        }

      }
      return result;
    }
}
getElementsByClassName("filament_table red cell") ;
getElementsByClassName("filament_table red cell",document,"div") ;

未完,待修改...

时间: 2024-08-06 11:37:04

getElementsByClassName兼容IE6/7/8的实现方法的相关文章

CSS完美兼容IE6/IE7/FF的通用方法

一.CSS HACK以下两种方法几乎能解决现今所有HACK. 1, !important 随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.) wrapper {width: 100px!important; /* IE7+FF /width: 80px; / IE6 */} 2, IE6/IE77对FireFox +html 与 *html 是IE特有的标签, firefox 暂不支持.而+html 又为 IE7

PNG兼容IE6解决方法

虽然说现在早就不用ie6浏览器了,可以还是有一小部分还在使用 ,刚好公司也有要求~~~ <p>E6不兼容png图片,确实让网页的图片质量大大下降,为了兼容万恶的IE6,总结了下面几种方法: 1,通过CSS滤镜使背景图的PNG对IE6进行兼容. 2,给img定义样式,页面上所有透明png即自动透明了. 3,通过JS,插入一段代码,实现img标签png兼容IE6的问题. 4,可以把png图片,转换为gif图片.(最简单常用的方法) </p> <br/> 第一种方法:<

div+css 兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器方法(非原创)

div+css 兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器方法 1.DOCTYPE 影响 CSS 处理 2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行 3.FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中 4.FF: 设置 padding 后, div 会增加 height 和 wi

{转}div+css 兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器方法

div+css 兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器方法 1.DOCTYPE 影响 CSS 处理 2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行 3.FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中 4.FF: 设置 padding 后, div 会增加 height 和 wi

[转]CSS完美兼容IE6/IE7/IE8/IE9/IE10的通用方法

CSS完美兼容IE6/IE7/IE8/IE9/IE10的通用方法 2013-12-12  By 奥夫 关于CSS对各个浏览器兼容已经是老生常谈的问题了, 网络上的教程遍地都是.以下内容没有太多新颖, 纯属个人总结, 希望能对初学者有一定的帮助. 一.CSS HACK 以下两种方法几乎能解决现今所有HACK. 1, !important 随着IE7对!important的支持, !important 方法现在只针对… 一.CSS HACK 以下两种方法几乎能解决现今所有HACK. 1, !impo

PNG24图片兼容IE6解决的方法

非常多人都遇到一个问题:那就是PNG不能正常显示,比方: 网上试过的非常多办法都非常难实现.要嘛就是效果不好,那如今最好的办法就是直接调用JS插件,解决! 点击下载 如今说一下怎么用这个文件吧! 首先看下代码: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>PNG24兼容IE6</title> <style type='text/css

兼容低版本浏览器的一些方法

页面滚动的兼容方法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> body { height: 3000px; } </style> </head> <body> </body> </html> &

【JavaScript】兼容IE6可调可控的图片滑块

图片滑块其实也与图片轮播一样,无需这么多奇奇怪怪的代码就能够实现,只是布局有点复杂,而且这东西在Bootstrap里面也没有,在网页中,这个组件也越来越少见的,毕竟这个小小的组件太浪费网络资源了,实现的逻辑还比较复杂,如果不要被特别要求,能不做最好不好. 有时候,如果一个如同<[CSS]黑色幽默,兼容IE6的纯原生态的门户网站>(点击打开链接)的简单网页就能够交货,就不要卖弄你的前端技巧了. 虽然这个组件的效率很低,但是还是讲解一下实现的原理,也是完美兼容IE6,同时包你能够随心所欲地放置这个

[转载]使用兼容ie6 ie7 ie8 FF的text-overflow:ellips

使用兼容ie6 ie7 ie8 FF的text-overflow:ellipsis超出文本显示省略号来代替截取函数更有利于seo,如果使用截取函数,源代码中的标题是显示不完整的,即便是在title属性中使用了显示完整标题,也不如完整的标题文字连接.这个方法使得两者兼得,既能显示完整标题又对搜索引擎友好. 如果不想显示省略号,那么把text-overflow属性值改成 clip 就行了,显示的还是完整的标题文字连接. 下面是html文件完整代码,已经测试过了,大家复制使用即可. 效果预览: <!D