document.getElementsByName() - nameで要素を取得する

投稿日: / 更新日:

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

サンプルコード

<form>
	<input name="date" type="text" value="2016-07-02">
</form>

<form>
	<input name="date" type="text" value="2016-07-01">
</form>
// [date]を持つ全ての要素を取得
var elements = document.getElementsByName( "date" ) ;

// elements(HTMLCollection)の内容
// [0]=<input name="date" type="text" value="2016-07-02">
// [1]=<input name="date" type="text" value="2016-07-01">

// 取得した1つ目の要素のvalueを変更 (応用)
elements[0].value = "1999-01-01" ;

デモ

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

構文

HTMLCollection = document.getElementsByName( name )

引数

項目説明
name取得したいname属性を指定する。

戻り値

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

ノート

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

例文

全部の要素に処理をする

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

// 全ての[name="date"]を取得
var elements = document.getElementsByName( "date" ) ;

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

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

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

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

// 全ての[name="date"]を取得
var elements = document.getElementsByName( "date" ) ;

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

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

}