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