页面代码片段
<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));也可以传一个参数；
js根据类名获取元素的底层原理
原文地址：https://www.cnblogs.com/qiweile/p/9288133.html