原理：

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

源碼

?

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

?

1 <script type="text/javascript"> 2 window.onload = function(){ 3 var oUL = document.getElementById("ul1"); 4 var oLi = getByClass(oUL,"li_box"); 5 for(var i=0;i<oLi.length;i++){ 6 oLi[i].style.background = "red" 7 } 8 } 9 </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

?

總結

以上是生活随笔為你收集整理的JS-获取class类名为某个的元素-【getClass】函数封装的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。