zoukankan      html  css  js  c++  java
  • 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));也可以传一个参数;
     
    if(you love javascript) I'd like to be with your friends
  • 相关阅读:
    Sonar安装与使用说明
    oracle物化视图使用+hibernate
    CAS实现SSO单点登录原理(转)
    冒泡事件通用解法
    百度网盘搜索
    (转)mvn clean install 与 mvn install 的区别(为啥用clean)
    初识Channel
    Java 重入锁 ReentrantLock
    多线程之Future模式
    一天一个类--NIO 之Buffer
  • 原文地址:https://www.cnblogs.com/qiweile/p/9288133.html
Copyright © 2011-2022 走看看