ywork2020.com

Title

要素のname属性値でNodeListを取得する

目次 (INDEX)

getElementsByNameとは

getElementsByName とは次の語句からなるメソッドです。
get
読み: ゲット
意味: 取得する
element
読み: エレメント
意味: 要素
by
読み: バイ
意味: 経由して
name
読み: ネーム
意味: 名前

目次に戻る

getElementsByNameの概要

Documentオブジェクトのメソッドの一つです。 Documentオブジェクトはdocument変数、またはdocumentプロパティから参照します。

このメソッドはページ内に配置されたname属性を検索して引数に指定されたname属性値をもつ要素を NodeListコレクションとして取得することができます。 なお、このNodeListは、生きたNodeListであり、ページ内の要素に更新があればNodeListの内容も同時に更新されます。 また、ブラウザによってはNodeListではなくHTMLCollectionとして返される場合もあります。

このgetElementsByNameメソッドで取得したNodeListから要素の各プロパティにアクセスすることができます。 NodeListから要素にアクセスする場合は配列を操作する場合と同じ方法で行うことができます。 つまり、NodeList[インデックス番号]を使うこともできますし、NodeList.item(インデックス番号)という方法でも参照が可能です。

類似メソッドのgetElementsByClassNameメソッドが上手く動作しないブラウザに対しては代替の利用価値があります。

目次に戻る

実機サンプル

このサンプルでは3つのp要素に同じネーム属性値を付けてグループ化しています。
下のボタンをクリックするとサンプルコードの関数を実行して結果を表示します

サンプルテキスト

サンプルテキスト

サンプルテキスト

目次に戻る

サンプルコード

<body>
	<p><input type="button" value="ボタン" onclick="evtName()"></p>
	<p name="namAnswer">サンプルテキスト</p>
	<p name="namAnswer">サンプルテキスト</p>
	<p name="namAnswer">サンプルテキスト</p>
	<script>
		document.open();
		function evtName(){
			let namAnswer = document.getElementsByName("namAnswer");
			namAnswer[0].innerHTML = "Hello";
			namAnswer[1].innerHTML = "World";
			namAnswer.item(2).innerHTML = namAnswer.length + "個の要素";
		}
		document.close();
	</script>
</body>

目次に戻る

サンプルコードの要点

  1. 3つのp要素にname属性を持たせて、値を"namAnswer"としました。
  2. getElementsByName()メソッドでページ内の同じname属性の要素をNodeListとして取得しています。
  3. NodeList.lengthで要素数を取得できます。

目次に戻る