Выбор вторых детей из первых детей div в javascript

У меня есть html, который выглядит примерно так:

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

Я использую:

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

потому что мне нужен этот div в var, но мне также нужно получить этот второй div в первом div внутри mainDiv в переменную.

Как я могу сделать это с помощью простого кросс-браузера?

Ответы

Ответ 1

Предполагая, что структура статична, вы можете сделать это:

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

Дальнейшее чтение: .getElementsByTagName() (из MDN).

Ответ 2

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

или

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

Ответ 3

Я бы выбрал jQuery и получил бы что-то вроде этого:

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

Fiddle

Ответ 4

Я бы пошел просто с одной строкой кода ванили.

Работает для любых элементов, не ограничиваясь именами тегов, которые у вас есть в структуре. Но количество элементов и иерархии должно быть сохранено.

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

Ответ 5

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

http://jsfiddle.net/MGVw8/