element.childrenは、「element」に指定した要素の直接の子要素への参照を格納した配列を返すプロパティ。
構文
var $elementsList = $elementNodeReference.children;
戻り値
子要素への参照を格納した配列。要素リスト。
サンプル
id属性がsampleAである要素の子要素の数は、
サンプルの動作について
「sampleA()」ボタンをクリックすると、ボタンの下のリスト項目に「サンプル１～３」と表示し、「id属性がsampleAである要素の子要素の数は、」の右横に「3」と表示する。
サンプルのソースコード
JavaScript
<script type="text/javascript">
function sampleA() {
var $elementNodeReference = document.getElementById( "sampleA" );
var $elementsList = $elementNodeReference.children;
$elementsList[0].innerHTML = "サンプル１";
$elementsList[1].innerHTML = "サンプル２";
$elementsList[2].innerHTML = "サンプル３";
document.getElementById( "nodesListLength" ).innerHTML = $elementsList.length;
}
</script>
function sampleA() {
var $elementNodeReference = document.getElementById( "sampleA" );
var $elementsList = $elementNodeReference.children;
$elementsList[0].innerHTML = "サンプル１";
$elementsList[1].innerHTML = "サンプル２";
$elementsList[2].innerHTML = "サンプル３";
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>
<p>id属性がsampleAである要素の子要素の数は、<span id="nodesListLength"></span></p>
<ol id="sampleA">
<li></li>
<li></li>
<li></li>
</ol>