HTMLCollection.item() - インデックス番号のHTML要素を取得する

2017/10/08

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

概要

名前

item

所属

IDL

getter Element? item(unsigned long index);

仕様書

https://dom.spec.whatwg.org/#dom-htmlcollection-item

説明

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

チュートリアル

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

<p class="hoge">Good Morning!</p>
<p class="hoge">Hello!</p>
<p class="hoge">Good Evening!</p>

// HTMLCollectionを取得
var elements = document.getElementsByClassName( "hoge" ) ;

elements.item( 0 ) ;	// <p class="hoge">Good Morning!</p>
elements.item( 1 ) ;	// <p class="hoge">Hello!</p>
elements.item( 2 ) ;	// <p class="hoge">Good Evening!</p>

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

elements[0] ;	// <p class="hoge">Good Morning!</p>
elements[1] ;	// <p class="hoge">Hello!</p>
elements[2] ;	// <p class="hoge">Good Evening!</p>

デモ

HTMLCollection.item()のデモです。

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

<!DOCTYPE html>
<html>
<head>
<style>
div#result { white-space: pre-wrap ; }
</style>
</head>
<body>
<p>SYNCER1</p>
<p>SYNCER2</p>
<p>SYNCER3</p>
<hr>
<div id="result"></div>
<script>
var elements = document.getElementsByTagName( "p" ) ;
var value = elements.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>