首页 > Web开发 > 详细

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

时间:2018-07-10 12:28:32      阅读:191      评论:0      收藏:0      [点我收藏+]

页面代码片段

 <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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!