web-dev-qa-db-ja.com

javascriptで最初のdiv子の2番目の子を選択する

次のような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');

varにそのdivが必要なため、mainDiv内の最初のdivの2番目のdivを変数に入れる必要もあります。

どうすれば簡単なクロスブラウザの方法でそれを行うことができますか？

javascripthtmlparent-childgetelementbyid
22
James Harzs

構造が静的であると仮定すると、これを行うことができます：

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

さらに読む： .getElementsByTagName()（MDNから） 。

27
nnnnnn
 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];
13
Chao Zhang

JQueryを選択すると、次のような結果になります。

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

フィドル

6
Ja͢ck

Vanillaコードを1行だけ使用するだけです。

すべての要素に対して機能し、構造内にあるタグ名に限定されません。ただし、要素の数と階層は保持する必要があります。

var requiredDiv = document.getElementById('mainDiv').firstChild.firstChild.nextSibling;
4
TeeJay
var mainDiv = document.getElementById('mainDiv');
var div = maindiv.getElementsByTagName('div')[2];//third div

http://jsfiddle.net/MGVw8/

0
Musa