js根據類名獲取元素的底層原理

頁面代碼片段

　<div></div>

    <div class="box fl">這是box</div>

    <div class="colorRed box3">這是box</div>

    <div></div>

    <div class="box">這是box</div>

    <div id="text">

        <div class="box">這是text內部的box</div>

        <div class="box">這是text內部的box</div>

    </div>

 

 

根據類名獲取元素的底層原理

function getByClass(cls,ele){

　　//ele參數表示本次查找的范圍；是一個可選參數，默認值為body

　　ele = element || document.body;

　　var arr = [];

　　//獲取body中所有的標簽 

　　var tags = element.getElementsByTagName('*');

　　//for循環檢測每一個標簽的類名，是否含有box，

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

　　　　//我們無法直接檢測所以通過split方法用空格分割字符串，並存儲到classARR數組中

　　　　var classArr = tags[i].className.split(' ');

　　　　//對classArr數組進行循環檢測 看是否含有box類名；

　　　　for(var j=0;j<classArr.length;j++){

　　　　　　if(classArr[j] === cls){

　　　　　　　　//如果有box類名就添加到arr數組中去；

　　　　　　　　arr.push(tags[i]);

　　　　　　　　break;

　　　　　　}

　　　　}

　　}

　　return arr;

}

var text = document.getElementById('text');

console.log(getByClass('box',text));//可以傳兩個參數；

console.log(getByClass(text));也可以傳一個參數；