您的位置:首页 > Web前端 > JavaScript

JavaScript通过Class Name获取一个对象的数组

2012-06-11 16:26 381 查看
DOM 提供了一个名为 getElementById() 的方法,这个方法将返回一个对象,这个对象就是参数 id 所对应的元素节点。另外,getElementByTagName() 方法会返回一个对象的数组,每一个对象分别对应着文档里有给定标签的一个元素。这个方法的参数是 html 标签的名字。现在我们考虑一个问题,能不能通过标签的类名class name来获取该对象呢?下面是这个猜想的程序实现(支持多个class查询和在某个范围内进行查询):

<script type="text/javascript">
/*
* 根据元素clsssName得到元素集合
* @param fatherId 父元素的ID,默认为document
* @tagName 子元素的标签名
* @className 用空格分开的className字符串
*/
function getElementsByClassName(fatherId,tagName,className){
  node = fatherId&&document.getElementById(fatherId) || document;
  tagName = tagName || "*";
  className = className.split(" ");
  var classNameLength = className.length;
  for(var i=0,j=classNameLength;i<j;i++){
  //创建匹配类名的正则
    className[i]= new RegExp("(^|\\s)" + className[i].replace(/\-/g, "\\-") + "(\\s|$)");
  }
  var elements = node.getElementsByTagName(tagName);
  var result = [];
  for(var i=0,j=elements.length,k=0;i<j;i++){//缓存length属性
    var element = elements[i];
    while(className[k++].test(element.className)){//优化循环
      if(k === classNameLength){
        result[result.length] = element;
        break;
      }
    }
    k = 0;
  }
  return result;
}
</script>


测试一

<div id="container">
  <span class="aaa zzz ccc"></span>
  <div class="aaa bbb ccc"></div>
</div>
<div class="aaa bbb ccc"></div>
<script type="text/javascript">
  window.onload = function(){
    alert(getElementsByClassName(document,"div","aaa ccc").length);//2
    alert(getElementsByClassName("container","div","aaa ccc").length);//1
    alert(getElementsByClassName("container","span","aaa zzz").length);//1
  }
</script>


测试二

<script type="text/javascript">
  window.onload = function(){
    var e=getElementsByClassName(document,"div","c_ad_block");
    if(e){if(typeof(e.length)=='undefined'){e.parentNode.removeChild(e);}else{for(var i=0;i<e.length;i++){e[i].parentNode.removeChild(e[i]);}}}
  }
</script>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐