HTML DOM Document getElementsByTagName() メソッド

定義と使用法

getElementsByTagName() メソッドは指定されたタグ名を持つすべての要素の集合を返します。

getElementsByTagName() メソッドは以下を返します HTMLCollection

getElementsByTagName() 属性は読み取り専用です。

注：getElementsByTagName("*") ドキュメント内のすべての要素を返します。

HTMLCollection

HTMLCollection HTML 要素の配列に似た集合（リスト）です。

インデックスを通じて集合内の要素にアクセスできます（0から始まる）。

length 属性は集合内の要素の数を返します。

参照も：

getElementById() メソッド

getElementsByClassName() メソッド

querySelector() メソッド

querySelectorAll() メソッド

HTMLCollection オブジェクト

インスタンス

例 1

タグ名が "li" のすべての要素を取得します：

const collection = document.getElementsByTagName("li");

自分で試してみる

例 2

ドキュメント内のすべての要素を取得します：

const collection = document.getElementsByTagName("*");

自分で試してみる

例 3

ドキュメント内の最初の <p> 要素の内部 HTML を変更します：

document.getElementsByTagName("p")[0].innerHTML = "Hello World!";

自分で試してみる

例 4

ドキュメント内の <li> 要素の数：

let numb = document.getElementsByTagName("li").length;

自分で試してみる

例 5

すべての <p> 要素の背景色を変更します：

const collection = document.getElementsByTagName("P");
for (let i = 0; i < collection.length; i++) {
  collection[i].style.backgroundColor = "red";
}

自分で試してみる

構文

document.getElementsByTagName(tagName)

パラメータ

パラメータ 説明
tagName 必須。要素のタグ名。

返り値

タイプ 説明
オブジェクト

HTMLCollection オブジェクト。

指定されたタグ名を持つ要素の集合。

要素がドキュメント内で現れる順序に基づいてソートされます。

技術的詳細

このメソッドは NodeList オブジェクトを返します（読み取り専用の配列として処理できます）、このオブジェクトはドキュメント内に指定されたタグ名を持つすべての Element ノードを保持しており、その順序はソースドキュメント内で現れる順序と一致します。

NodeList オブジェクトは「生きている」ものです、つまり、ドキュメント内に指定されたタグ名を持つ要素が追加されたり削除されたりした場合、内容は自動的に必要な更新が行われます。

HTML ドキュメントは大文字と小文字を区別しませんので、任意の大文字と小文字の形式で指定できます。 tagName、これはドキュメント内のすべての同名タグにマッチします（ソースドキュメント内の大文字と小文字の形式に関わらず）。ただし、XML ドキュメントは大文字と小文字を区別します。tagName 名前と完全に一致するタグのみにマッチします。

ヒント：Element インターフェースは同名のメソッドを定義しており、それはドキュメントのサブツリーのみを検索します。また、HTMLDocument インターフェースは以下を定義しています getElementByName() メソッド、name 属性の値に基づいて要素を検索します（タグ名ではなく）。

ブラウザのサポート

document.getElementsByTagName() DOM レベル 1 (1998) 特性です。

すべてのブラウザがサポートしています：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
サポート 9-11 サポート サポート サポート サポート

関連ページ

JavaScript リファレンスマニュアル：element.getElementsByTagName()

JavaScript チュートリアル：JavaScript HTML DOM ノードリスト