SYNCERのロゴ
アイキャッチ画像

NodeList.item() - インデックス番号のノードを取得する

item()は、NodeListのメソッドです。インデックス番号を指定してノードを取得します。このメソッドは、ブラケット記法(例: [0])に置き換えられます。

概要

名前
item
所属
NodeList
IDL
getter Node? item(unsigned long index);
仕様書
https://dom.spec.whatwg.org/#dom-nodelist-item

説明

引数(index)に、取得したいノードのインデックス番号を指定します。存在しないインデックス番号を指定した場合、nullを返します。

チュートリアル

メソッドを利用して文字列を取得する例です。

<input name="hoge" value="SYNCER1">
<input name="hoge" value="SYNCER2">
<input name="hoge" value="SYNCER3">
// HTMLCollectionを取得
var elements = document.getElementsByName( "hoge" ) ;

nodes.item( 0 ) ;	// <input name="hoge" value="SYNCER1">
nodes.item( 1 ) ;	// <input name="hoge" value="SYNCER2">
nodes.item( 2 ) ;	// <input name="hoge" value="SYNCER3">

このメソッドは、下記の通り、ブラケット記法で代用できます。特に理由がなければ、こちらを利用しましょう。

nodes[0] ;	// <input name="hoge" value="SYNCER1">
nodes[1] ;	// <input name="hoge" value="SYNCER2">
nodes[2] ;	// <input name="hoge" value="SYNCER3">

デモ

NodeList.item()のデモです。

<!-- このコードは編集できます。 -->

<!DOCTYPE html>
<html>
<head>
<style>
div#result { white-space: pre-wrap ; }
</style>
</head>
<body>
<p><input name="hoge" value="SYNCER1"></p>
<p><input name="hoge" value="SYNCER2"></p>
<p><input name="hoge" value="SYNCER3"></p>
<hr>
<div id="result"></div>
<script>
var nodes = document.getElementsByName( "hoge" ) ;
var value = nodes.item( 1 ) ;

console.log( value ) ;
document.getElementById( "result" ).appendChild( new Text( value + "\n\n" ) ) ;
document.getElementById( "result" ).appendChild( new Text( value.outerHTML ) ) ;
</script>
</body>
</html>

サポート状況

ChromeFirefoxSafariEdgeIEOperaiOS SafariAndroid
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年10月8日 (日)
コンテンツを公開しました。