JavaScript name属性で取得/設定する(getElementsByName)

JavaScriptのネーム属性(name属性)で取得/設定するサンプルです。
getElementsByNameメソッドを使用します。

確認環境
・Windows10
・Google Chrome

目次

value値を取得/設定するサンプル

ボタンを押すとgetElementsByNameメソッドでvalue値の取得と設定を行い、テキストボックス内の文字が変化します。

コード

上記サンプルのコードです。

<input type="text" name="text1" value="赤" maxlength="6">
<input type="button" value="変更" onclick="clickBtn1()">

<script>
function clickBtn1(){
	const text1 = document.getElementsByName("text1");
	const value1 = text1[0].value;

	if (value1 === "赤"){
		text1[0].value = "青";
	}else{
		text1[0].value = "赤";
	}
}
</script>

2行目のボタンを押すと5行目の関数を実行します。
6行目は、getElementsByNameメソッドです。引数のtext1は、1行目のnameのtext1を指します。NodeListコレクションを取得します。
7行目は、添字を指定しています。valueから値を取得しています。
10,12行目は、valueに値を設定しています。

 

表示されている文字を取得/設定するサンプル(textContent)

ボタンを押すとgetElementsByNameメソッドとtextContentで文字が変わります。

コード

上記サンプルのコードです。

<p name="p2">赤</p>
<input type="button" value="変更" onclick="clickBtn2()">

<script>
function clickBtn2(){
	const p2 = document.getElementsByName("p2");
	const str1 = p2[0].textContent;

	if (str1 === "赤"){
		p2[0].textContent = "青";
	}else{
		p2[0].textContent = "赤";
	}
}
</script>

2行目のボタンを押すと5行目の関数を実行します。
6行目は、getElementsByNameメソッドです。引数のp2は、1行目のnameのp2を指します。NodeListコレクションを取得します。
7行目は、添字を指定しています。textContentから値を取得しています。
10,12行目は、textContentに値を設定しています。

 

CSSで文字の色を変更するサンプル

ボタンを押すとgetElementsByNameメソッドとCSSで文字の色が変わります。

コード

上記サンプルのコードです。

<p name="p3">赤</p>
<input type="button" value="変更" onclick="clickBtn3()">

<script>
function clickBtn3(){
	const p3 = document.getElementsByName("p3");
	const str1 = p3[0].style.color;

	if (str1 === "red"){
		p3[0].style.color = "blue";
	}else{
		p3[0].style.color = "red";
	}
}
</script>

2行目のボタンを押すと5行目の関数を実行します。
6行目は、getElementsByNameメソッドです。引数のp3は、1行目のnameのp3を指します。NodeListコレクションを取得します。
10,12行目は、CSSで値を設定しています。

 

getElementsByNameメソッド

変数 = document.getElementsByName(name属性の値);
  • ネーム属性を指定してNodeListコレクションを取得します。
  • 以下は、NodeListコレクションのイメージです。
  • IEとEdgeは、仕様が異なる点があります。以下のMDNのページを参照下さい。
  • 以下は、MDNのgetElementsByNameメソッドのリンクです。
    https://developer.mozilla.org/ja/docs/Web/API/Document/getElementsByName

関連の記事

JavaScript タグ名を指定して要素ノードを取得する(getElementsByTagName)
JavaScript クラス単位で取得/設定する(getElementsByClassName)
JavaScript 全ての子の要素を取得/設定する(children)
JavaScript 属性値を取得/設定する(getAttribute/setAttribute)

△上に戻る