核心代碼
function getByClass(sClass,oParent){
//考慮到會有從某個父元素中獲取 有className名的元素 的情況（如下示例'aaa'）；
//所以傳入第二個參數為父元素，先做一個判斷，不傳參數的話默認為document是更為常用的情況
var Parent = oParent || document;
//先獲取所有的子元素
var oEle = Parent.getElementsByTagName('*');
//聲明一個空數組用來存放獲取到的元素
var newArr=[];
//如果是常規瀏覽器，document.getelementsByClassName方法為true，則直接使用
if(Parent.getElementsByClassName){
return Parent.getElementsByClassName(sClass);
//沒有這種方法的話，則需要拿到所有的子元素，再做判斷
}else{
//遍歷所有的子元素，得到所有的className；
for(var i=0;i<oEle.length;i++){
//將得到的 className 用數組保存
var cn = oEle[i].className;
var arr = cn.split(" ");
//遍歷得到的className，做判斷
//需要注意的是，避免使用indexOf方法，原因：比如取test1，含有testtest1這個類名的元素也將被取到
//將含有className的元素放入新數組
for(var j=0;j<arr.length;j++){
if(arr[j] == sClass){
newArr.push(oEle[i]);
break;
}
}
}
return newArr;
}
}
測試如下
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 </head> 9 <body> 10 <div id="aaa"> 11 <div class="bbb"> 12 13 </div> 14 </div> 15 <div class="bbb"> 16 17 </div> 18 <div class="bbb"> 19 20 </div> 21 <script> 22 23 function getByClass(sClass,oParent){ 24 25 var Parent = oParent || document; 26 27 var oEle = Parent.getElementsByTagName('*'); 28 29 var newArr=[]; 30 31 if(Parent.getElementsByClassName){ 32 33 return Parent.getElementsByClassName(sClass); 34 35 }else{ 36 37 for(var i=0;i<oEle.length;i++){ 38 39 var cn = oEle[i].className; 40 41 var arr = cn.split(" "); 42 43 for(var j=0;j<arr.length;j++){ 44 45 if(arr[j] == sClass){ 46 47 newArr.push(oEle[i]); 48 49 break; 50 51 } 52 } 53 } 54 return newArr; 55 } 56 } 57 58 //獲取ID為'aaa'的div中class為'bbb'的元素 59 var a = document.getElementById('aaa'); 60 var cd = getByClass('bbb',a); 61 console.log(cd);//Array[div.bbb] 62 </script> 63 64 </body> 65 </html>
總結：考慮到有從父元素直接獲取子元素的情況，所以把document修改成了父元素，並且不傳參數的話父元素默認為document
在獲取className的元素的時候，會有兩個class名的情況，這時候之前的代碼就會出現不適用的情況，所以做出修改，即再加一層判斷（詳見注釋處）