HTML DOM getElementsByTagName（）メソッド

❮要素オブジェクト

例

リストの最初の<li>要素（インデックス0）のHTMLコンテンツを変更します。

var list = document.getElementsByTagName("UL")[0];
list.getElementsByTagName("LI")[0].innerHTML = "Milk";

定義と使用法

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

NodeListオブジェクトは、ノードのコレクションを表します。ノードにはインデックス番号でアクセスできます。インデックスは0から始まります。

ヒント： NodeListオブジェクトのlengthプロパティを使用して、指定したタグ名を持つ子ノードの数を決定できます。次に、すべてのノードをループして、必要な情報を抽出できます。

ヒント： parametervalue "*"は、要素のすべての子要素を返します。

ブラウザのサポート

表の数字は、このメソッドを完全にサポートする最初のブラウザバージョンを示しています。

Method
getElementsByTagName()	1.0	6.0	3.0	3.0	9.5

構文

element.getElementsByTagName(tagname)

パラメータ値

Parameter	Type	Description
tagname	String	Required. The tagname of the child elements you want to get

技術的な詳細

DOMバージョン	コアレベル1要素オブジェクト
戻り値：	指定されたタグ名を持つ要素の子要素のコレクションを表すNodeListオブジェクト。返されたコレクションの要素は、ソースコードに表示されるとおりに並べ替えられます。

その他の例

例

<div>要素内にある<p>要素の数を調べます（NodeListオブジェクトのlengthプロパティを使用）。

var x = document.getElementById("myDIV").getElementsByTagName("P").length;

例

<div>要素内の2番目の<p>要素（インデックス1）の背景色を変更します。

var x = document.getElementById("myDIV");
x.getElementsByTagName("P")[1].style.backgroundColor = "red";

例

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

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

例

<div>要素内の4番目の要素（インデックス3）の背景色を変更します。

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

例

「*」パラメーターを使用します。

<div>要素内のすべての要素の背景色を変更します。

var x = document.getElementById("myDIV");
var y = x.getElementsByTagName("*");
var i;
for (i = 0; i < y.length; i++) {
y[i].style.backgroundColor = "red";
}

JS Reference

JavaScript

Window

HTML DOM

Web APIs

HTML Objects

Other References