A-A+

JavaScript通过class获取元素

2015年11月11日 JavaScript 暂无评论 阅读 77 次

JavaScript通过class获取元素

/*在javascript中用className来获取元素的class,但实际中最好把它封装成一个方法方便以后我们二次利用。
第一种:*/
<div class="box">第一个box</div>
<div class="box">第二个box</div>
<div class="box">第三个box</div>
/*第二种:*/
<div class="box aa bb">第一个box</div>
<div class="box dd">第二个box</div>
<div class="box">第三个box</div>
/*方法一:获取单个相同的class*/
functiongetByClass(clsName){
  varelements=document.getElementsByTagName('*'),
      eles=[];
  /*当className相等时添加到数组中*/
  for(vari=0,l=elements.length;i<l;i++){
    if(elements[i].className==clsName){
      eles.push(elements[i]);//向eles数组后面添加elements[i]元素
    }
  }
  returneles;
}
/*调用方法如下:*/
window.onload=function(){
    varaBox=getByClass("box");
    for(vari=0;i<aBox.length;i++){
       alert(aBox[i].innerHTML);
    }
};
/*方法二:通过正则表达式获取多个class*/
functiongetByClass(clsName){
    varelements=document.getElementsByTagName('*'),
      eles=[];
    /*正则表达式*/
    varre=newRegExp("\b"+ sClass + "\b","g");
        
    for(vari=0,l=elements.length;i<l;i++){
        /*字符串search方法判断是否存在匹配*/
        if(elements[i].className.search(re) != -1){
            eles.push(elements[i]);
        }
    }
    returneles;
};
/*调用方法同上。
方法三:通过数组获取多个class*/
function getByClass(clsName){
 varelements=document.getElementsByTagName('*'),
      eles=[];
   
    for(vari=0;i<elements.length;i++){
        /*将每个className拆分*/
        vararr=elements[i].className.split(/s+/);
        for(varj=0;j<arr.length;j++){
            /*判断拆分后的数组中有没有满足的class*/
            if(arr[j]==clsName){
                aResult.push(elements[i]);
            }
        }
    }
    returneles;
};
/*调用方法同上。
优化代码:由于document.getElementsByTagName('*')很浪费资源,所以我们可以做下代码优化。*/
functiongetByClass(clsName,parent){
  varoParent=parent?document.getElementById(parent):document,
      eles=[],
      elements=oParent.getElementsByTagName('*');
  for(vari=0,l=elements.length;i<l;i++){
    if(elements[i].className==clsName){
      eles.push(elements[i]);
    }
  }
  returneles;
}
/*调用方法同上。*/
标签:

给我留言

Copyright © web前端技术开发个人博客 保留所有权利  京ICP备14060653号 Theme  Ality

用户登录