码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2018-07-10 12:56:59      阅读:199      评论:0      收藏:0      [点我收藏+]

标签:class   字符串   获取   存储   div   name   方法   默认   classname   

页面代码片段

 <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根据类名获取元素的底层原理

标签:class   字符串   获取   存储   div   name   方法   默认   classname   

原文地址:https://www.cnblogs.com/qiweile/p/9288133.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!