JS-獲取class類名為某個的元素-【getClass】函數封裝

原理：

/*
 * 根據class獲取元素.
 * 原理是，取出oparent下的所有元素，組成數組，然后遍歷類名，全等判斷。
*/

源碼

 

 1 function getClass(oParent,clsName){
　　  var oParent = document.getElementById(oParent);
 2     var boxArr = new Array();
 3     oElements  = oParent.getElementsByTagName('*');
 4     for(var i=0;i<oElements.length;i++){
 5         if(oElements[i].className == clsName){
 6             boxArr.push(oElements[i]);
 7         }
 8     }
 9     return boxArr;
10 }

 

 

 

函數調用

getClass(oParent,clsName);

代碼解釋：

function getClass(oParent,clsName){
    var boxArr = new Array();
    //boxArr 用來存儲獲取到的所有class為clsName的元素
    
    oElements  = oParent.getElementsByTagName('*');
    //oElements 獲得的是父元素下的所有元素，是一個集合
    
    for(var i=0;i<oElements.length;i++){
        //循環遍歷獲取到的oElements數組
        
        if(oElements[i].className == clsName){
            //判斷數組中，元素的類名如果和傳過來的想要獲取的類名一致的話
            
            boxArr.push(oElements[i]);
            //利用數組的push功能把對應的元素裝進去
        }
    }
    return boxArr;
    //彈出最后的結果
}

______________________________2017-05-21  18:35:10______________________________

豐富一下另一端js

 

<script type="text/javascript">
    window.onload = function(){
        var oUL = document.getElementById("ul1");
        var oLi = getByClass(oUL,"li_box");
        for(var i=0;i<oLi.length;i++){
            oLi[i].style.background = "red"
        }
    }
</script>

 

 

解釋：

var oUL = document.getElementById("ul1");

//獲取到需要的找class的父元素

var oLi = getByClass(oUL,"li_box");

//讓子元素們等於函數返回來的那個數組。其實直接用getElementsByTagName獲取到的也是一個元素集合。現在直接等於一個數組，能用的方法和屬性則更多了呢！順便調用函數並傳參。參數是父元素的變量和需要找的類名。

for(var i=0;i<oLi.length;i++){

//循環彈出來的數組，也就是所有類名為“li_box”的li

//接下來直接做你想讓那些帶你需要類名的元素該做的事。
比如：oLi[i].style.background = "red"

 

 

 

——————————————————2018年修復bug———————————————————

function getClass(oParent,clsName) {
	var oParents = document.getElementById(oParent);
	var boxArr = new Array();
	var oElements  = oParents.getElementsByTagName('*');
	for(let i=0;i<oElements.length;i++){
		var classNameArr = oElements[i].className.split(/\s+/);
		for (let j = 0; j < classNameArr.length; j++) {
			if(classNameArr[j] === clsName){
	        boxArr.push(oElements[i]);
	    }
		}
	    
	}
	console.log(boxArr)
	return boxArr;
	
}
getClass('搜索范圍外框的idName','要搜索的className');

這種寫法主要是針對，如果你要搜索擁有該className的元素上邊，還有別的className，那么之前的程序是做不到的，所以用split把元素上的類名切開來，再進行對比。

這里，在boxArr.push那里，原來想錯了，寫的classNameArr[j]，后來發現，boxArr最后是一個字符串數組，並不是元素數組，所以改成oElements[i]就可以了。

 

 

聲明：

　　請尊重博客園原創精神，轉載或使用圖片請注明：

　　博主：xing.org1^

　　出處：http://www.cnblogs.com/padding1015/

　　time： 20180106 20:28:32