JavaScript - getElementsByTagName()の使い方

JavaScriptで「要素名（タグ名）」から要素を取得する場合は、 getElementsByTagName()メソッドを使います。

getElementById()と違って、複数の要素を取得する可能性があるため 「Elements」と複数形になっていることに注意してください。

戻り値はHTMLCollectionオブジェクトです。

getElementsByTagName()の構文

document.getElementsByTagName('要素名')

要素名 = タグ名

引数に「'*'」を指定すると、すべての要素を取得できます。

サンプルコード

次のサンプルコードでは、p要素のテキストコンテンツをコンソールに表示します。

HTML

<p>コンテンツ1</p>

<p>コンテンツ2</p>

<p>コンテンツ3</p>

JavaScript

var elems = document.getElementsByTagName('p');

for (var i = 0; i < elems.length; i++){
	console.log(elems[i].textContent);
}


// 実行結果
コンテンツ1
コンテンツ2
コンテンツ3

該当要素がない場合

先程のHTMLを使って、存在しない要素（a要素）を指定してみます。

var elems = document.getElementsByTagName('a');

console.log(elems);        // HTMLCollection []

console.log(elems.length); // 0

「HTMLCollection []」と表示されているように、 該当要素がない場合は、空のHTMLCollectionオブジェクトを返します。

lengthプロパティの値は0となっています。

getElementById()は該当id名がない場合は、「null」を返しますが、

getElementsByTagName()は該当要素がない場合でもHTMLCollectionオブジェクトを返します。