浅谈getElementsByClassName

虽然IE6、7、8基本已经退出市场了，但是对于getElementsByClassName的兼容性问题，我觉得还是有必要去了解的。就好比很多的人喜欢去阅读jQuery的源码，你在看别人源码的同时，你会学习到很多知识，提升自己写代码的能力。

对于不支持此方法的浏览器，我们首先想到的可能就是如下的办法：

function getElementsByClassName(className){
			//用于保存与className对应的节点
			var elements = [], 
				tags = document.getElementsByTagName('*');
			for(var i=0;i<tags.length;i++){
				if(tags[i].className == className){
					elements.push(tags[i]);
				}
			}
			return elements;
		}

存在问题：document.getElementsByTagName('*')会匹配页面上所有的元素，性能上存在缺陷
解决办法：通过约束搜索的范围进行优化

function getElementsByClassName(className,parentId){
			var elements = [],
				parentElement = parentId ? document.getElementById(parentId) : document;
			var tags = parentElement.getElementsByTagName('*');
			for(var i=0;i<tags.length;i++){
				if(tags[i].className == className){
					elements.push(tags[i]);
				}
			}
			return elements;
		}

发现问题：以上的方法对于单个类（如：class=“box”）的元素是可以进行获取的，但如果出现多个类（如：class="box container news-list"）的情况呢

解决办法：应用正则

function getElementsByClassName(className,parentId){
			var elements = [],
				parentElement = parentId ? document.getElementById(parentId) : document;
			var tags = parentElement.getElementsByTagName('*'),
				reg = new RegExp('(\\s|^)' + className + '(\\s|$)');
			for(var i=0;i<tags.length;i++){
				if(reg.test(tags[i].className)){
					elements.push(tags[i]);
				}
			}
			return elements;
		}

座右铭：要么现在去追求，要么永远不去做，明天太晚了。