nodeList.item( index )は、「nodeList」に指定したノードリストのうち、引数「index」に指定したインデックスを持つノードを取得するメソッド。
構文
var $nodeItem = $nodeList.item( index );
引数
- index
- 取得したいノードのインデックスを指定。
戻り値
取得したノード。
ポイント
上記の構文は下のように書いても同じこと。私は下のように書くことが多い。
var $nodeItem = $nodeList[0];
サンプル
- 項目Ａ
- 項目Ｂ
- 項目Ｃ
サンプルの動作について
- 「Ａ」ボタンをクリックすると、ボタン群の右横に「項目Ａ」と表示する。
- 「Ｂ」ボタンをクリックすると、ボタン群の右横に「項目Ｂ」と表示する。
- 「Ｃ」ボタンをクリックすると、ボタン群の右横に「項目Ｃ」と表示する。
サンプルのソースコード
JavaScript
<script type="text/javascript">
var $count = 0;
function sample( $index ) {
var $nodeList = document.getElementById( "sample" ).childNodes;
var $elementNodeReference = document.getElementById( "sampleOutput" );
$elementNodeReference.innerHTML = $nodeList.item( $index ).innerHTML;
}
</script>
var $count = 0;
function sample( $index ) {
var $nodeList = document.getElementById( "sample" ).childNodes;
var $elementNodeReference = document.getElementById( "sampleOutput" );
$elementNodeReference.innerHTML = $nodeList.item( $index ).innerHTML;
}
</script>
HTML
<p>
<button onclick="sample(0);">Ａ</button>
<button onclick="sample(1);">Ｂ</button>
<button onclick="sample(2);">Ｃ</button>
<span id="sampleOutput" style="margin-left: 10px;"></span>
</p>
<ol id="sample"><li>項目Ａ</li><li>項目Ｂ</li><li>項目Ｃ</li></ol>
<button onclick="sample(0);">Ａ</button>
<button onclick="sample(1);">Ｂ</button>
<button onclick="sample(2);">Ｃ</button>
<span id="sampleOutput" style="margin-left: 10px;"></span>
</p>
<ol id="sample"><li>項目Ａ</li><li>項目Ｂ</li><li>項目Ｃ</li></ol>