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

 

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

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

如果有以下dom结构:

 

	
	

     如 找到所有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);

     

    你可能感兴趣的:(前端基础,JS)