nodeList.lengthは、「nodeList」に指定したノードリストのノード数を返すプロパティ。
構文
var $nodeItem = $nodeList.length;
戻り値
ノードの数。
サンプル
- 項目Ａ
- 項目Ｂ
- 項目Ｃ
サンプルの動作について
- 「ノード数を数える」ボタンをクリックすると、ボタンの右横に現在のリスト項目の数を表示する。
- 「リスト項目追加」ボタンをクリックする度に、「新項目1、新項目2、新項目3」のように連番付きで項目を追加する。
サンプルのソースコード
JavaScript
<script type="text/javascript">
function sampleCount() {
var $nodeList = document.getElementById( "sample" ).childNodes;
var $elementNodeReference = document.getElementById( "sampleOutput" );
$elementNodeReference.innerHTML = $nodeList.length;
}
var $count = 1;
function sampleAdd() {
var $newElement = document.createElement( "LI" );
var $textNode = document.createTextNode( "新項目" + $count++ );
$newElement.appendChild( $textNode );
var $elementNodeReference = document.getElementById( "sample" );
$elementNodeReference.appendChild( $newElement );
}
</script>
function sampleCount() {
var $nodeList = document.getElementById( "sample" ).childNodes;
var $elementNodeReference = document.getElementById( "sampleOutput" );
$elementNodeReference.innerHTML = $nodeList.length;
}
var $count = 1;
function sampleAdd() {
var $newElement = document.createElement( "LI" );
var $textNode = document.createTextNode( "新項目" + $count++ );
$newElement.appendChild( $textNode );
var $elementNodeReference = document.getElementById( "sample" );
$elementNodeReference.appendChild( $newElement );
}
</script>
HTML
<p>
<button onclick="sampleAdd();">リスト項目追加</button>
<button onclick="sampleCount();">ノード数を数える</button>
<span id="sampleOutput" style="margin-left: 10px;"></span>
</p>
<ol id="sample"><li>項目Ａ</li><li>項目Ｂ</li><li>項目Ｃ</li></ol>
<button onclick="sampleAdd();">リスト項目追加</button>
<button onclick="sampleCount();">ノード数を数える</button>
<span id="sampleOutput" style="margin-left: 10px;"></span>
</p>
<ol id="sample"><li>項目Ａ</li><li>項目Ｂ</li><li>項目Ｃ</li></ol>