JavaScript タグ名で取得/設定する(getElementsByTagName)

JavaScriptのタグ名で取得/設定するサンプルです。
getElementsByTagNameメソッドを使用します。

確認環境
・Windows10
・Google Chrome

説明	タグ名とgetElementsByTagNameメソッドの関係
	似ている他のメソッド
取得/設定	value値を取得/設定する
	表示されている文字を取得/設定する(textContent)
	CSSで文字の色を変更する(css)

タグ名とgetElementsByTagNameメソッドの関係

タグ名とgetElementsByTagNameメソッドの関係についてです。

以下にテキストボックスと文字のhtmlがあるとします。(input type="text"です)

このとき黄色の箇所がタグ名です。

タグ名・・・input,p

getElementsByTagNameメソッドは、このタグ名を引数にして対象のHTMLCollection(※)を返します。

例としてgetElementsByTagName("input")とした場合、戻りの変数.item(0)とすれば、要素(Element)である<input type="text" id="text1" value="赤" maxlength="5">を取得できます。

get + Elements + By + TagNameです。
注意ポイントは、Elementsと複数形なので要素を複数取得する場合があります。

HTMLCollection

HTMLCollectionとは、要素群の集合を表現したインターフェイスです。
以下は、HTMLCollectionのイメージです。
メソッドとプロパティを使えます。
以下はMDNのHTMLCollectionのリンクです。
https://developer.mozilla.org/ja/docs/Web/API/HTMLCollection

※ HTMLレンダリングエンジンがWebKitのブラウザ(safari等)では NodeList を返します。
Google ChromeのHTMLレンダリングエンジンはBlinkです。

似ている他のメソッド

ID属性がある場合は、getElementByIdで要素を取得できます。(HTMLCollectionではなく)
またはquerySelectorやquerySelectorAllであればCSSのセレクタで対象の要素を取得できます。

value値を取得/設定する

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

コード

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

<div id="div1">
	<input type="text" value="赤" maxlength="6">
	<input type="text" value="赤" maxlength="6">
</div>
<input type="button" value="変更" onclick="clickBtn1()">

<script>
function clickBtn1(){
	const div1 = document.getElementById("div1");
	const input1 = div1.getElementsByTagName("input");

	if (input1.item(0).value == "赤"){
		for (let i=0;i<input1.length;i++){
			(input1.item(i).value = "青");
		}
	}else{
		for (let i=0;i<input1.length;i++){
			(input1.item(i).value = "赤");
		}
	}
}
</script>

5行目のボタンを押すと8行目の関数を実行します。
10行目の先頭はdocumentではなく、9行目で取得したdiv1です。
getElementsByTagNameメソッドの引数のinputは、2,3行目のinputタグを指します。複数の要素(オブジェクト)を取得します。
14,18行目は、valueに値を設定しています。

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

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

赤

コード

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

<div id="div2">
	<p id="p21">赤</p>
	<p id="p22">赤</p>
</div>
<input type="button" value="変更" onclick="clickBtn2()">

<script>
function clickBtn2(){
	const div2 = document.getElementById("div2");
	const p2 = div2.getElementsByTagName("p");

	if (p2.item(0).textContent == "赤"){
		for (let i=0;i<p2.length;i++){
			(p2.item(i).textContent = "青");
		}
	}else{
		for (let i=0;i<p2.length;i++){
			(p2.item(i).textContent = "赤");
		}
	}
}
</script>

5行目のボタンを押すと8行目の関数を実行します。
10行目の先頭はdocumentではなく、9行目で取得したdiv2です。
getElementsByTagNameメソッドの引数のpは、2,3行目のpタグを指します。複数の要素(オブジェクト)を取得します。
14,18行目は、textContentに値を設定しています。

CSSで文字の色を変更する(css)

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

赤

コード

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

<div id="div3">
	<p id="p31">赤</p>
	<p id="p32">赤</p>
</div>
<input type="button" value="変更" onclick="clickBtn3()">

<script>
function clickBtn3(){
	const div3 = document.getElementById("div3");
	const p3 = div3.getElementsByTagName("p");

	if (p3[0].style.color == "red"){
		for (let i=0;i<p3.length;i++){
			p3[i].style.color = "blue";
		}
	}else{
		for (let i=0;i<p3.length;i++){
			p3[i].style.color = "red";
		}
	}
}
</script>

5行目のボタンを押すと8行目の関数を実行します。
10行目の先頭はdocumentではなく、9行目で取得したdiv3です。
getElementsByTagNameメソッドの引数のpは、2,3行目のpタグを指します。複数の要素(オブジェクト)を取得します。
14,18行目は、CSSで値を設定しています。

getElementsByTagNameメソッド

変数 = document.getElementsByTagName(タグ名);

タグ名(<p>等)を指定して要素(HTMLCollection)を取得します。
先頭にあるdocumentは、別の要素に変更できます。
以下はMDNのgetElementsByTagNameメソッドのリンクです。
https://developer.mozilla.org/ja/docs/Web/API/Document/getElementsByTagName