JavaScript ID属性で取得/設定する(getElementById)

JavaScriptのID属性で取得/設定するサンプルです。
getElementByIdメソッドを使用します。

確認環境
・Windows10
・Google Chrome

目次

説明 ID属性とgetElementByIdメソッドの関係
取得/設定 value値を取得/設定する
  表示されている文字を取得/設定する(textContent)
  CSSで文字の色を変更する(css)

ID属性とgetElementByIdメソッドの関係

ID属性とgetElementByIdメソッドの関係についてです。

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

<input type="text" id="text1" value="赤" maxlength="5">

このとき黄色の箇所がID属性でその右横にあるのがID属性の値です。

ID属性・・・id
ID属性の値・・・text1

getElementByIdメソッドは、このID属性の値を引数にして対象の要素(Element)を取得します。

例としてgetElementById("text1")とした場合、<input type="text" id="text1" value="赤" maxlength="5">を取得します。

get + Element + By + Idです。

value値を取得/設定する

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

コード

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

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

<script>
function clickBtn1(){
	const input1 = document.getElementById("input1");
	const value1 = input1.value;

	if (value1 == "赤"){
		input1.value = "青";
	}else{
		input1.value = "赤";
	}
}
</script>

2行目のボタンを押すと5行目の関数を実行します。
6行目は、getElementByIdメソッドです。引数のinput1は、1行目のidのinput1を指します。要素(オブジェクト)を取得します。
7行目は、valueの値を取得しています。
10,12行目は、valueに値を設定しています。

 

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

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

コード

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

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

<script>
function clickBtn2(){
	const p2 = document.getElementById("p2");
	const str1 = p2.textContent;

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

2行目のボタンを押すと5行目の関数を実行します。
6行目は、getElementByIdメソッドです。引数のp2は、1行目のidのp2を指します。要素(オブジェクト)を取得します。
7行目は、textContentの文字を取得しています。
10,12行目は、textContentに文字を設定しています。

 

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

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

コード

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

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

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

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

2行目のボタンを押すと5行目の関数を実行します。
6行目は、getElementByIdメソッドです。引数のp3は、1行目のidのp3を指します。要素(オブジェクト)を取得します。
9,11行目は、CSSで1行目の文字の色を設定しています。

getElementByIdメソッド

変数 = document.getElementById(idの値);

関連の記事

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

△上に戻る