HTMLCollection item() メソッド

定義と使用法

item() メソッドは HTMLCollection 内の指定されたインデックスの要素を返します。

要素はソースコード内の位置に基づいてソートされ、インデックスは 0 から始まります。

短縮メソッドを使用することもできますが、同じ結果が得られます：

var x = document.getElementsByTagName("P")[0];

インスタンス

例 1

本文書の最初の <p> 要素の HTML 内容を取得します：

function myFunction() {
  var x = document.getElementsByTagName("P").item(0);
  alert(x.innerHTML);
}

自分で試してみてください

構文

HTMLCollection.item(index)

または：

HTMLCollection[index]

パラメータの値

パラメータ タイプ 説明
index Number

必須。返す要素のインデックス。

注：インデックスは 0 から始まります。

返り値

Element オブジェクト、指定されたインデックスの要素を示します。

索引番号が範囲外の場合、null を返します。

ブラウザのサポート

メソッド Chrome IE Firefox Safari Opera
item() サポート サポート サポート サポート サポート

さらに多くの例

例 2

最初の <p> 要素の HTML 内容を変更します：

document.getElementsByTagName("P").item(0).innerHTML = "Paragraph changed";

自分で試してみてください

例 3

すべての class="myclass" の要素をループして、背景色を変更します：

var x = document.getElementsByClassName("myclass");
for (i = 0; i < x.length; i++) {
  x.item(i).style.backgroundColor = "red";
}

自分で試してみてください

例 4

最初の <p> 要素の HTML 内容を取得します：<div> 元素

var div = document.getElementById("myDIV");
var x = div.getElementsByTagName("P").item(0).innerHTML;

自分で試してみてください

関連ページ

HTMLCollection：length 属性

HTML 要素：getElementsByClassName() メソッド

HTML 要素：getElementsByTagName() メソッド