トップページ >  javascript >  子要素を取得する
初版2013/02/24: 最終更新日2013/02/24
  子要素を取得する
目次
子要素を取得する
子要素を取得する
子要素を取得するには、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>