getElementsByTagName()如何只获取第一层子标签的集合？

Question

请各位大神不吝赐教！下面贴代码：

<div id="main">
   <div class="on">
       <div class="item-top"></div>
       <div class="item-dis"></div>
   </div>
   <div class="hide">
       <div class="item-top"></div>
       <div class="item-dis"></div>
   </div>
   <div class="hide">
       <div class="item-top"></div>
       <div class="item-dis"></div>

   </div>

</div>

我想获取id="main"下面的三组<div>改变它们的class值。用var oTab=document.getElementById("main");var oDivs=oTab.getElementsByTagName("div");得到的却是class="on"下面的div。如何才能只取id="main"的第一层div集合？

Answer 1

var oTab = document.getElementById('main'); var child = oTab.children; for (var i = 0, len = child.length; i < len; i++) {     child[i].className = '填入class值';     }

Answer 2

你说的方法得出的应该是class="main"下面所有div的集合如果只取id="main"的第一层div集合，用.children即可(oTab.children)

Answer 3

不考虑ie6,7可以用querySelectorAll.当然也可以这样：    var parent=document.getElementsByTagName("div")[0];     var children=parent.childNodes,result=[];     for(var i=0,len=children.length;i<len;i++){         if(children[i].nodeName!=="#text"){             result.push(children[i]);         }     }

Answer 4

 window.onload=function(){      var idmain=document.getElementsByTagName("div")[0];    var on=idmain.childNodes[1];  alert(on.innerHTML);    }  节点问题 on.innerHTML弹出的是这个 ：<div class="item-top">1</div>   <div class="item-dis">2</div>我觉得on就应该是那个div.on