封装一个获取具有某class属性值的所有元素的方法

 

我们要知道数组的slice方法的底层实现原理：

	Array.prototype.slice = function(a,b){
		var newArr=[];
		for(var i = 0;i < b;i++){
			newArr.push(arr[i]);
		}
		return newArr;
	}

如果有以下dom结构：

 

	<input id="demo" type="text" name="name">
	<ul></ul>
	<div class="demo item             aaa">
		<p class="demo  "></p>
	</div>

 如 找到所有class属性值为demo的元素： 

Document.prototype.getByClassName=function(className){
		var allDomArr=Array.prototype.slice.call(document.getElementsByTagName('*'),0);//获取所有标签元素，并把得到的类数组转化成数组
		var filterArr=[];
		
		function dealClass(dom){//规范格式把相邻多个空格替换为一个空格
			var reg=/\s+/g;
			var arrClassName=dom.className.replace(reg,' ').trim();//提取所有className
			return arrClassName;
		}
		allDomArr.forEach(function(ele, index){
			var itemClassArr=dealClass(ele).split(' ');	//每个元素的class属性值存进数组
			for(var i = 0;i < itemClassArr.length; i++){
				if(itemClassArr[i]==className){
					filterArr.push(ele);
					break;
				}
			}
		})
		return filterArr;
	}
	var oClass=document.getByClassName('demo')
	console.log(oClass);