element.childNodesプロパティ

投稿日: 2013年7月23日 作成者: alphasis

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

構文

var $nodesList = $elementNodeReference.childNodes;

戻り値

子ノードへの参照を格納した配列。ノードリスト。

サンプル①

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

サンプル①の動作について

「sampleA()」ボタンをクリックすると、ボタンの下のリスト項目に「サンプル１～３」と表示する。

サンプル①のソースコード

JavaScript

<script type="text/javascript">
function sampleA() {
    var $sampleRootElement = document.getElementById( "sampleA" );
    var $nodesList = $sampleRootElement.childNodes;
    $nodesList[0].innerHTML = "サンプル１";
    $nodesList[1].innerHTML = "サンプル２";
    $nodesList[2].innerHTML = "サンプル３";
    document.getElementById( "nodesListLength" ).innerHTML = $nodesList.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>

サンプル②

id属性がsampleBである要素の子ノードの数は、

  1. sampleB-1
  2. sampleB-2
  3. sampleB-3

id属性がsampleCである要素の子ノードの数は、

  1. sampleC-1
  2. sampleC-2
  3. sampleC-3

サンプル②の動作について

「sampleBC()」ボタンをクリックすると、「id属性がsampleBである要素の子ノードの数は、」の右横に「3」と表示、「id属性がsampleCである要素の子ノードの数は、」の右横に「7」と表示する。

Node.childNodesプロパティは、テキストや改行やタブなどのテキストノードも含めるので、sampleCは、「3+4」で「7」となる。

サンプル②のソースコード

JavaScript

<script type="text/javascript">
function sampleBC() {
    var $sampleRootElement = document.getElementById( "sampleB" );
    var $nodesList = $sampleRootElement.childNodes;
    document.getElementById( "sampleBNodesListLength" ).innerHTML = $nodesList.length;
    var $sampleRootElement = document.getElementById( "sampleC" );
    var $nodesList = $sampleRootElement.childNodes;
    document.getElementById( "sampleCNodesListLength" ).innerHTML = $nodesList.length;
}
</script>

HTML

<button onclick="sampleBC();">sampleBC()</button>
<p>id属性がsampleBである要素の子ノードの数は、<span id="sampleBNodesListLength"></span></p>
<ol id="sampleB"><li>sampleB-1</li><li>sampleB-2</li><li>sampleB-3</li></ol>
<p>id属性がsampleCである要素の子ノードの数は、<span id="sampleCNodesListLength"></span></p>
<ol id="sampleC">
<li>sampleC-1</li>
<li>sampleC-2</li>
<li>sampleC-3</li>
</ol>

スポンサード リンク

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