element.childrenプロパティ

element.childrenは、「element」に指定した要素の直接の子要素への参照を格納した配列を返すプロパティ。

構文

var $elementsList = $elementNodeReference.children;

戻り値

子要素への参照を格納した配列。要素リスト。

サンプル

id属性がsampleAである要素の子要素の数は、

サンプルの動作について

「sampleA()」ボタンをクリックすると、ボタンの下のリスト項目に「サンプル1~3」と表示し、「id属性がsampleAである要素の子要素の数は、」の右横に「3」と表示する。

サンプルのソースコード

JavaScript

<script type="text/javascript">
function sampleA() {
    var $elementNodeReference = document.getElementById( "sampleA" );
    var $elementsList = $elementNodeReference.children;
    $elementsList[0].innerHTML = "サンプル1";
    $elementsList[1].innerHTML = "サンプル2";
    $elementsList[2].innerHTML = "サンプル3";
    document.getElementById( "nodesListLength" ).innerHTML = $elementsList.length;
}
</script>

HTML

<button onclick="sampleA();">sampleA()</button>
<p>id属性がsampleAである要素の子要素の数は、<span id="nodesListLength"></span></p>
<ol id="sampleA">
    <li></li>
    <li></li>
    <li></li>
</ol>

スポンサード リンク

カテゴリー: DOM, Elementオブジェクト, JavaScript, プロパティ, リファレンス, 参照, 逆引き パーマリンク