次のような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を変数に入れる必要もあります。
どうすれば簡単なクロスブラウザの方法でそれを行うことができますか?
構造が静的であると仮定すると、これを行うことができます:
_var mainDiv = document.getElementById('mainDiv'),
childDiv = mainDiv.getElementsByTagName('div')[0],
requiredDiv = childDiv.getElementsByTagName('div')[1];
_
さらに読む: .getElementsByTagName()
(MDNから) 。
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];
Vanillaコードを1行だけ使用するだけです。
すべての要素に対して機能し、構造内にあるタグ名に限定されません。ただし、要素の数と階層は保持する必要があります。
var requiredDiv = document.getElementById('mainDiv').firstChild.firstChild.nextSibling;
var mainDiv = document.getElementById('mainDiv');
var div = maindiv.getElementsByTagName('div')[2];//third div