Get items just 1 level below the current item using javascript

Question

I need to access the DOM tree and get elements only 1 level below the current element.

Read the following code:

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

I want to get 3 elements "a", "b", "c" in the section "node". What should I do?

var nodes = node.getElementsByTagName ("div") <---- I get all the divs, but not the 3 divs I need.

var nodes = node.childNodes; <---- works in IE, but FF contains Node text

Does anyone know how to solve a problem?

Answer 1

You can use a function that excludes all non-element nodes:

 function getChildNodes(node) { var children = new Array(); for(var child in node.childNodes) { if(node.childNodes[child].nodeType == 1) { children.push(child); } } return children; } 

Answer 2

I highly recommend you take a look at jQuery . The task you want to do is simple in pure Javascript, but if you do an extra DOM workaround, jQuery is going to save you countless hours of frustration. Not only this, but it works in all browsers and has a very good “finished document”.

Your problem resolved with jQuery looks like this:

 $(document).ready(function() { var children = $("#node").children(); }); 

It searches for any element with the identifier "node", and then returns its children. In this case, children is a jQuery collection that can be repeated using a for loop. Alternatively, you can iterate over them using the each () command.

Answer 3

This is easier than you think:

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

Answer 4

Try this (late answer, but may be useful to others):

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

Answer 5

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

You can also take a look at some javascript library, such as prototype , which provide many useful functions.

Answer 6

I added text so that we can see that it works, and JavaScript, which will add “added!”. at the bottom of each of the divs in the database:

 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 7

In my opinion, the easiest way to do this is to add the 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 use the getElementsByClassName method, so in this case:

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