解决getElementsByClassName兼容性问题

在IE8及IE8以下浏览器中不支持getElementsByClassName,需要自己重新修改一下,如下:

第一种方法:javascript DOM书中提供的简单替换方案(不是很严谨,但是很容易看明白)

function getElementsByClassName(node,classname){

	if(node.getElementsByClassName){
		// 使用现有方法
		return node.getElementsByClassName(classname);
	}
	else{

		var results = new Array();
		// 获取改元素下的所有元素
		var elems = node.getElementsByTagName("*");
		for(var i=0; i<elems.length; i++){
			// 判断每个元素的className是否包含指定的classname
			if (elems[i].className.indexOf(chassname) != -1) {
				results[results.length] = elems[i];
			}
		}
		return results;
	}
}

var p = document.getElementsByTagName("p")
var sales = getElementsByClassName(p,"sales");


第二种方法:模仿jQuery中的兼容性(ps:自学传智播客视频中老师的讲解)

说明: 由于每次调用getElementsByClassName时进行能力检测,效率非常低,所以需要在浏览器加载js开始时,就进行能力判断,在全局作用域提供一个support方法,里面提供所有的与方法名相同的属性,值均为boolean,之后用到能力检测的地方直接调用support即可。

代码示范:

// byClassName的能力检测部分
var support = {};
// 第一种方法
// support.getElementsByClassName = !!document.getElementsByClassName;

// 第二种方法 加强的检测
support.getElementsByClassName = (function(){

    // 赋值为isExist的boolean值
    var isExist = !!document.getElementsByClassName;

    // 判断getElementsByClassName是否为方法(防止代码注入)
    if(isExist && typeof document.getElementsByClassName == 'function'){
        // 创建div
        var div = document.createElement('div'),
            divWithClass = document.createElement('div');

        // 赋值一个class为c
        divWithClass.className = 'c';
        // 将divWithClass追加到div中
        div.appendChild(divWithClass);
        // 返回获取的className c 是否为divWithClass
        return div.getElementsByClassName('c')[0] === divWithClass;
    }
    return false;
})();

// 定义getClass选择器
var getClass = function (className, results) {

    // 判断results是否存在,不存在则赋值为数组
    results = results || [];

    // 判断是否支持getElementsByClassName
    if(support.getElementsByClassName){
        // 如果支持则使用默认的
        results.push.apply(results,document.getElementsByClassName(className));
    }
    else {
        // 自定义实现
        // 循环,判断是否符合要求 说明:each循环与getTag方法也为封装的方法,在之后js框架封装的文章中
        each(getTag('*'), function (i, v) {
            // 判断该元素是否有该className
            if((' ' + v.className + ' ').indexOf(' ' + className + ' ') != -1){
                results.push(v);
            }
        });
    }
    return results;
}

本人为前端新手,很多文章是作为自学过程中记下的笔记,错误的地方希望大家能指出,谢谢



  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值