原理：

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

源碼

?

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 }

?

?

?

函數(shù)調(diào)用

getClass(oParent,clsName);

代碼解釋：

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

________________________________________________________________________________________________________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");

//讓子元素們等于函數(shù)返回來(lái)的那個(gè)數(shù)組。其實(shí)直接用getElementsByTagName獲取到的也是一個(gè)元素集合?，F(xiàn)在直接等于一個(gè)數(shù)組，能用的方法和屬性則更多了呢！順便調(diào)用函數(shù)并傳參。參數(shù)是父元素的變量和需要找的類名。

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

//循環(huán)彈出來(lái)的數(shù)組，也就是所有類名為“l(fā)i_box”的li

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

?

?

?

——————————————————————————————————————2018年修復(fù)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');

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

這里，在boxArr.push那里，原來(lái)想錯(cuò)了，寫的classNameArr[j]，后來(lái)發(fā)現(xiàn)，boxArr最后是一個(gè)字符串?dāng)?shù)組，并不是元素?cái)?shù)組，所以改成oElements[i]就可以了。

?

?

聲明：

　　請(qǐng)尊重博客園原創(chuàng)精神，轉(zhuǎn)載或使用圖片請(qǐng)注明：

　　博主：xing.org1^

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

　　time： 20180106?20:28:32

?

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。