Selecting second children of first div children in javascript

Question

I have an html that look something like this:

<div id="mainDiv"> <-- I have this
    <div>
        <div></div>
        <div></div> <-- I need to get this
    </div>
    <span></span>
    <more stuff />
</div>

i am using:

var mainDiv = document.getElementById('mainDiv');

because I need that div in a var, but i also need to get that second div on the first div inside mainDiv into a variable.

How could I do it in a simple cross-browser way?

Answer 1

Assuming that structure is static you can do this:

var mainDiv = document.getElementById('mainDiv'),
    childDiv = mainDiv.getElementsByTagName('div')[0],
    requiredDiv = childDiv.getElementsByTagName('div')[1];

Further reading: .getElementsByTagName() (from MDN).

Answer 2

 var mainDiv = document.getElementById('mainDiv');
 var x = mainDiv.children[0].children[1];

or

 var mainDiv = document.getElementById('mainDiv');
 var x = mainDiv.getElementsByTagName('div')[0].getElementsByTagName('div')[1];

Answer 3

I would go simply with just one line of vanilla code.

Works for any elements, is not limited to the tag names you have in the structure. But the number of elements and the hierarchy must be preserved.

var requiredDiv = document.getElementById('mainDiv').firstChild.firstChild.nextSibling;

Answer 4

I would pick jQuery and end up with something like this:

var getThis = $('#mainDiv > div:eq(0) > div:eq(1)');

Fiddle

Answer 5

var mainDiv = document.getElementById('mainDiv');
var div = maindiv.getElementsByTagName('div')[2];//third div

http://jsfiddle.net/MGVw8/

Answer 6

You know there is querySelector now ?

console.log(
  mainDiv.querySelector(':nth-child(1) > :nth-child(2)'))

<div id="mainDiv">
  <div>
    <div></div>
    <div>come get me</div>
  </div>
  <!-- more stuff -->
</div>