如何用dom操作选择具有相同className的元素？

Question

我知道选择批量a可以使用document.getElementsByTagName('a')如何选择具有相同的className的元素集合呢？注：除了使用jquery，我知道jquery是具备这个功能的，能不能只用js实现

Answer 1

function getElementsByClassName(className, parentElement){
var elems = ($(parentElement)||document.body).getElementsByTagName("*");
var result=[];
for (i=0; j=elems[i]; i++){
  if ((" "+j.className+" ").indexOf(" "+className+" ")!=-1){
   result.push(j);
  }
}
return result;
} ???????这样子么？

Answer 2

 function getElementsByClassName(className){
        var ret=[];
        var dom= document.getElementsByName("*");
        for(var i=0;i<dom.length;i++){
            if(dom[i].className==className){
                ret.push(dom[i])
            }
        }
        return ret;
    }

Answer 3

感谢楼上两位的及时答复，document.getElementsByName("*")，这样使用会不会使得页面加载效率变低，因为选择了全局的内容而且再一个大循环也就是说实际上js并没有能直接读取所有className相同属性集合的功能？必须使用自己写的函数？

Answer 4

没有
只能尽量优化
http://www.cnblogs.com/rubylouvre/archive/2009/07/24/1529640.html
看看这里

Answer 5

<div class="c"></div>
<div id="div1">
<div class="b"></div>
<div class="b c"></div></div>
<script>
var getByClass=function(cla,scope) {
scope=scope || document;
if(scope.getElementsByClassName)//非ie已经支持
return scope.getElementsByClassName(cla);
var els=scope.getElementsByTagName("*");
for(var i=0,l=0,res=[];i<els.length;i++) {
var cur=els[i];
if(typeof(cur.className)!=="undefined" && cur.className.search("\\b"+cla+"\\b") != -1) {
res[l++]=cur;
}
}
return res;
}
var g=function(){return document.getElementById(arguments[0])};
alert(getByClass("c").length);
alert(getByClass("c",g("div1")).length);
</script>

Answer 6

function getElementsByClassName(className){
var allDomNodesArray = document.getElementsByTagName('*');
  var _classNameNode = [];
  /*
   * 这种for(var i = 0 ; arr[i]; i++)循环
   * 和for(var i = 0 , i < arr.length; i++)、
   * for(var i = 0 , j = arr.length; i < j ; i++)
   * 相比，速度提升很多,我做过实验。全选1500行checkbox的时候，他们3种循环的速度相差无几
   * 当数据量上升到15000行checkbox时，后两种循环出现页面操作停顿（也就是在执行循环呢，耗时太长），
   * 而第一种循环还是瞬间完成全选操作。
   * 当数据量上升到150000（十五万）行时，后面2种循环直接造成页面死掉。第一种循环，大约耗时2s就完成了全选
   */
  for(var i = 0 ; allDomNodesArray[i]; i++){//采用这用循环，速度将会大大提升。
   if(allDomNodesArray[i].className == className){
   _classNameNode.push(allDomNodesArray[i]);
   }
  }
  return _classNameNode;
}

Answer 7

那是因为你每次循环都获取一次length啊,应该这样
for(var i = 0 n=arr.length; i < n; i++)、 

Answer 8

请 10楼，看清楚我的注释。下面是我上面代码的注释/*
   * 这种for(var i = 0 ; arr[i]; i++)循环
   * 和for(var i = 0 , i < arr.length; i++)、
   * for(var i = 0 , j = arr.length; i < j ; i++) --- 请你注意这里，我已经写过了 --------
   * 相比，速度提升很多,我做过实验。全选1500行checkbox的时候，他们3种循环的速度相差无几
   * 当数据量上升到15000行checkbox时，后两种循环出现页面操作停顿（也就是在执行循环呢，耗时太长），
   * 而第一种循环还是瞬间完成全选操作。
   * 当数据量上升到150000（十五万）行时，后面2种循环直接造成页面死掉。第一种循环，大约耗时2s就完成了全选
   */你说的 for(var i = 0 n=arr.length; i < n; i++) 情况，我已经写过了。

Answer 9

我测试的结果是
for(var i = 0, j = arr.length; i < j ;i++){
快
不过其实绝大部分时间都用在渲染dom了
所以这部分的时间其实可以忽略不计了
不知你的结果是怎么得出来的

Answer 10

我估计你的“页面操作停顿”是dom渲染的时间
因为如果只是for那部分的话就算是150000也是很快就完成了