document.getElementsByTagName() - タグ名で要素を取得する

投稿日: / 更新日:

JavaScriptのdocument.getElementsByTagName()は、ドキュメント内にある、指定したタグ名を持つ全ての要素を取得するメソッドです。取得できるのはHTMLCollectionという、配列と似た構造のデータです。存在しない場合は空のHTMLCollection([])が返ります。

サンプルコード

<a>要素1</a>
<p>要素2</p>
<div>要素3</div>
<p>要素4</p>
<a>要素5</a>
// aタグの要素を全て取得
var elements = document.getElementsByTagName( "a" ) ;

// elements(HTMLCollection)の内容
// [0]=<a>要素1</a>
// [1]=<a>要素5</a>

// 取得した1つ目の要素のhref属性を変更 (応用)
elements[0].href = "https://syncer.jp/" ;

デモ

下の「実行」のボタンを押すと、document.getElementsByTagName()を使って、指定したタグ名の要素を取得します。分かりやすいように、別途、取得した要素の背景色を変更するようにしています。

構文

HTMLCollection = document.getElementsByTagName( tag )

引数

項目説明
tag取得したいタグ名を指定する。

戻り値

項目説明
HTMLCollection取得した全ての要素を含んだHTMLCollection(配列)が戻り値となる。

ノート

サポート状況
全てのブラウザがサポートしている。
HTMLCollectionとは?
HTMLCollectionとは簡単に言うと、劣化版の配列です。配列と同じように[0]で1つ目、[1]で2つ目というように要素を参照できますが、例えばforEach()pop()など、配列のメソッドを使うことができません。
存在しない場合は空
指定したクラス名の要素が1つもなかった場合、空の配列(HTMLCollection)が返ります。
ドキュメント上にないとダメ
createElement()で作成してドキュメントに挿入していない状態の要素は、getElementsByTagName()で取得することはできない。
連動している
element1element2、それぞれに同じ配列(HTMLCollection)を代入したとします。この時、element1を変更したら、element2にもその変更が反映されます。
創作タグでも取得できる
例えば<hoge></hoge>など、定義されていないタグ名の要素をドキュメント上に配置した場合でも、getElementsByTagName( "hoge" )で取得できる。

例文

全部の要素に処理をする

取得した全ての要素に処理をするにはfor文を利用しましょう。HTMLCollectionはforEach()が使えません。

// 全てのaタグを取得
var elements = document.getElementsByTagName( "a" ) ;

// 取得した要素のtarget属性を[_blank]にする (最初の要素から順に処理)
for( var i=0,l=elements.length; l>i; i++ ) {
	var element = elements[i] ;
	element.setAttribute( "target", "_blank" ) ;
}

// 取得した要素のtarget属性を[_blank]にする (最後の要素から順に処理)
for( var i=elements.length; i--; ) {
	var element = elements[i] ;
	element.setAttribute( "target", "_blank" ) ;
}

存在する場合としない場合で処理を分ける

要素が存在した場合と、1つも存在しなかった場合で処理を分けるには、下記の通りです。空のHTMLCollection(配列)は、trueに相当するので、lengthプロパティ(中身が何個あるか)で判断しないといけません。

// 全てのaタグを取得
var elements = document.getElementsByTagName( "a" ) ;

// 1つ以上、存在した場合
// [elements]だけだと、空でも[true]判定になる
if( elements.length ) {
	// ...

// 1つも存在しなかった場合
} else {
	// ...

}