Get elements just 1 level below the current element by javascript

Answer 1

This is simplier than you think:

var nodes = node.querySelector("node > div");

Answer 2

Universal selectors can do the trick:

var subNodes = document.querySelectorAll("#node > *");

Query parts:

#node is unique container selector

> next slector should be applied only on childs

* universal selector that match every tag but not text

Can I use universal selector

Answer 3

I think node.childNodes is the right place to start. You could (to make it work with FF too), test the nodeName (and possibly nodeType) of all child nodes you get, to skip text nodes.

Also you might have a look at some javascript library like prototype, which provide a lot of useful functions.

Answer 4

I've added some text so we can see that it is working, and JavaScript that will add "added!" to the bottom of each of the divs at the base:

var cDiv = document.querySelectorAll('body > div > div'), i;
for (i = 0; i < cDiv.length; i++)
{
	cDiv[i].appendChild(document.createTextNode('added!'));
}

<div id="node">
    <div id="a">a
        <div id="aa">aa
            <div id="ab">ab
                <div id="aba">aba</div>
            </div>
        </div>
    </div>
    <div id="b">b
        <div id="ba">ba
            <div id="bb">bb
                <div id="bba">bba</div>
            </div>
        </div>
    </div>
    <div id="c">c
        <div id="ca">ca
            <div id="cb">cb
                <div id="cba">cba</div>
            </div>
        </div>
    </div>
</div>

Answer 5

Try this (late answer, but can be useful for others):

var list;
list=document.getElementById("node").querySelectorAll("#node>div");

Answer 6

In my opinion the easiest way to do this is to add a class name to the first level child nodes:

<div id="node">
    <div id="a" class="level_1">
        <div id="aa">
            <div id="ab">
                <div id="aba"></div>
            </div>
        </div>
    </div>
    <div id="b" class="level_1">
        <div id="ba">
            <div id="bb">
                <div id="bba"></div>
            </div>
        </div>
    </div>
    <div id="c" class="level_1">
        <div id="ca">
            <div id="cb">
                <div id="cba"></div>
            </div>
        </div>
    </div>
</div>

and then to use the method getElementsByClassName, so in this case:

document.getElementById('node').getElementsByClassName('level_1');