子要素を取得するには、childNodesを使用します。
以下のようなHTMLがあったとします。
child1
child2
child3
child4
child5
<div id="parent">
<span id="child1">child1</span>
<span id="child2">child2</span>
<span id="child3">child3</span>
<span id="child4">child4</span>
<span id="child5">child5</span>
</div>
<script language="JavaScript">
<!--
function a(){
elm = document.getElementById("parent").childNodes;
alert(elm.length);
}
// -->
</script>
以下のボタンを実行してください。
lengthを使用して子要素の数を取得しています。IE8では10と表示されます。ちなみにChrome25では11と表示されました。
これは
ホワイトスペースという要素も取得しているためです。
ホワイトスペース含め10個ありますが、それぞれのinnerHTMLを取得してみます。
以下のボタンを実行してください。
IE8では、child1,undefined,child2,...というようにアラートされます。undefinedがホワイトスペースのinnerHTMLです。
ちなみに、以下のように改行なしでHTMLを記述するとホワイトスペースはなくなります。
<div id="parent"><span >child1</span><span >child2</span></div>
以下、ソースです。
<script language="JavaScript">
<!--
function b(){
elm = document.getElementById("parent").childNodes;
for(var i=0;i<elm.length;i++){
alert(elm[i].innerHTML);
}
}
// -->
</script>