js根据类名获取元素的底层原理

Posted 2020-12-03 其微乐

页面代码片段

　<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));也可以传一个参数；