原生js解决document.getElementsByClassName兼容问题

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u014753892/article/details/52776973

       在新手使用原生JavaScript时,常常会用到document.getElementById、document.getElementsByClassName以及document.getElementsByTagName等方式来获取到元素,进而对其进行操作。但IE9以下的版本却不支持document.getElementsByClassName方法,所以很多刚开始接触js的同学往往会很困惑这个问题。这里封装了一下三种方法的的函数,使其都能完美使用三种方法,希望能对大家有所帮助。

这里使用的$符号作为函数名。同时在传递参数时,第二个参数可以不写。

// 可以根据 id、class、element 查找元素 
// param (字符串) : #id    .class    tag
// obj : 父元素
//首先判断通过哪种方式获取元素
function $(param, obj) { // #box
	obj = obj || document; // 没有传递 obj 参数,则默认使用 document
	if (param.charAt(0) === "#") // 通过id名获取元素
		return document.getElementById(param.slice(1));//这里的slice是字符串的一个函数,用于获取第2个元素及之后的字符串
	if (param.indexOf(".") === 0) //<span style="font-family: Arial, Helvetica, sans-serif;">通过class名获取元素</span>
		return getByClass(param.slice(1), obj);//调用下面的getClass函数

	return obj.getElementsByTagName(param); // tag
}

// 如何解决 getElementsByClassName 兼容问题
function getByClass(className, obj) {
	obj = obj || document;
<span style="white-space:pre">	</span>//如果浏览器支持此方法就直接调用
	if (obj.getElementsByClassName) // 支持 getElementsByClassName 方法的使用
		return obj.getElementsByClassName(className);
	/* 不支持 getElementsByClassName 方法的使用 */
	// 保存所有查找到的元素的数组结构
	var result = []; 
	// 查找出 obj 对象后代所有元素
	var tags = obj.getElementsByTagName("*");
	// 遍历每个元素
	for (var i = 0, len = tags.length; i < len; i++) {
		// 获取到当前遍历元素所使用的所有类名
		var classNames = tags[i].className.split(" ");
		// 遍历当前元素的每个类名
		for (var j = 0, l = classNames.length; j < l; j++) {
			if ( classNames[j] === className ) { // 说明当前遍历到的元素使用过要查找的类名
				result.push(tags[i]);
				break;
			}
		}
	}

	// 返回结果集
	return result;
}

下面的函数在确定浏览器不支持document.getElementsByClassName方法后,将传进来的父元素的子元素添加到一个数组中,之后对其进行遍历,将其元素的类名通过空格拆分(即split方法),最后对类名进行判断,将包含所需类名的元素名通过push()保存到数组result中,最后返回result。

展开阅读全文

没有更多推荐了,返回首页