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

请各位大神不吝赐教！下面贴代码：
<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集合？用getElementsByClassName()方法只能获取class相同的元素，我要获取的那三个div的clss不能相同。

9 个解决方案

#1

var divs = Array.prototype.filter.call(oDivs,function(ele){return ele.childElementCount > 0});

#2

通过childNodes来取，判断下节点名称

<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>

<script>

    function getChildNodes(node, tagName) {

        if (typeof node == 'string') node = document.getElementById(node);

        var nodes = [];

        for (var i = 0, j = node.childNodes.length; i < j; i++)

            if (node.childNodes[i].tagName == tagName) nodes.push(node.childNodes[i]);

        return nodes;

    }

    console.log(getChildNodes('main', 'DIV'));

</script>

#3

不考虑兼容低版本ie的话可以用
document.querySelectorAll("#main>div")

#4

取子节点就可以了

#5

dom.children

#6

#7

感谢各位的回答，非常感谢！二楼请收下一双膝盖~ getElementsByTagName()如何只获取第一层子标签的集合？

#8

我觉得还是在需要改的div上写上相同的id比较简单

#9

二楼的写法，貌似浏览器会报错var j = node.childNodes.length;

#1

var divs = Array.prototype.filter.call(oDivs,function(ele){return ele.childElementCount > 0});

#2