HTML DOM Element getElementsByTagName()メソッド

定義と用法

getElementsByTagName() メソッドは指定されたタグ名を持つ要素の子要素のコレクションをNodeListオブジェクトとして返します。

ヒント：パラメータの値 "*" 要素のすべての子要素を返します。

も参照してください：

getElementsByClassName()メソッド

querySelector()メソッド

querySelectorAll()メソッド

NodeList

NodeList 配列に似たノードコレクション（リスト）です。

リスト内のノードにインデックス（下標）でアクセスできます。インデックスは0から始まります。

length属性リスト内のノード数を返します。

例

例1

リスト内の最初の<li>要素のHTML内容を変更します：

const list = document.getElementsByTagName("UL")[0];
list.getElementsByTagName("li")[0].innerHTML = "Milk";

実際に試してみてください

例2

「myDIV」内の<p>要素の数：

const element = document.getElementById("myDIV");
const nodes = element.getElementsByTagName("p");
let numb = nodes.length;

実際に試してみてください

例3

「myDIV」内の2番目の<p>要素のフォントサイズを変更します：

const element = document.getElementById("myDIV");
element.getElementsByTagName("p")[1].style.fontSize = "24px";

実際に試してみてください

例4

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

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

実際に試してみてください

例5

「myDIV」内の4番目の要素（インデックス3）の背景色を変更します：

const div = document.getElementById("myDIV");
div.getElementsByTagName("*")[3].style.backgroundColor = "red";

実際に試してみてください

例 6

「*」パラメータを使用して、「myDIV」内のすべての要素の背景色を変更します：

const div = document.getElementById("myDIV");
const nodes = div.getElementsByTagName("*");
for (let i = 0; i < nodes.length; i++) {
  nodes[i].style.backgroundColor = "red";
}

実際に試してみてください

構文

element.getElementsByTagName(tagname)

パラメータ

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

返り値

タイプ 説明
NodeList

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

要素はソースコードに現れる順序に基づいて並べ替えられます。

技術的詳細

getElementsByTagName() このメソッドは指定された要素の子孫ノードを巡回し、指定されたタグ名を持つすべてのドキュメント要素を含む配列（実際には NodeList オブジェクト）を返します。配列に含まれる要素の順序は、それらがドキュメントのソースコードに現れる順序と一致します。

注意

Document インターフェースも定義しています getElementsByTagName() メソッドそれは同様ですが、特定の要素の子孫ノードを巡回するのではなく、全体のドキュメントを巡回します。

このメソッドと混同しないでください、 HTMLDocument.getElementsByName() メソッド 混同しないでください、後者は要素の name 属性値に基づいて要素を検索しますが、タグ名に基づいて検索しません。

ブラウザのサポート

すべてのブラウザがサポートしています element.getElementsByTagName()：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
サポート サポート サポート サポート サポート サポート