JavaScriptのgetElementByIdでIDから値を取得するサンプルです。
目次
サンプル | getElementByIdとは |
getElementByIdを使用する例 | |
value値を取得設定、背景と文字の色を変える | |
文字列の変更、文字列の表示非表示 | |
IDで探す範囲を指定してからクラスを検索 | |
JavaScriptからボタンをクリックする(clickメソッド) |
getElementByIdとは
document.getElementById(idの値); |
引数にidの値を指定して要素(Element)を取得します。
対象のidの値が存在しない場合はnullを返します。
getElementByIdを使用する例
テキストボックスに対してgetElementByIdを使用した例です。
getElementById("text1").valueとした場合、value値を取得します。
getElementById("text1")とした場合、要素(<input type="text" id="text1" value="赤" maxlength="5">)を取得します。
get(取得する) + Element(要素) + ById(IDによって)です。
value値を取得設定、背景と文字の色を変える
ボタンを押すとテキストボックス内の文字(value値)が変化し背景色が変わります。
上記サンプルのコードです。
<input type="text" id="input1" value="赤" maxlength="6" />
<input type="button" value="変更" onclick="clickBtn1()" />
<script>
function clickBtn1() {
const input1 = document.getElementById("input1");
if (input1.value === "赤") {
input1.value = "青";
input1.style.background = "#87CEFA";
input1.style.color = "red";
} else {
input1.value = "赤";
input1.style.background = "rgb(250,128,114)";
input1.style.color = "blue";
}
}
</script>
2行目のボタンを押すと5行目の関数を実行します。
6行目のgetElementByIdメソッドの引数のinput1は、1行目のidのinput1を指します。要素(オブジェクト)を取得します。
9行目からは、value値、背景色、文字色を設定しています。
文字列の変更、文字列の表示非表示
ボタンを押すと1行目の文字列が代わり2行目の文字列が表示と非表示で切り替わります。
赤
テスト
上記サンプルのコードです。
<p id="p2">赤</p>
<p id="p3">テスト</p>
<input type="button" value="変更" onclick="clickBtn2()" />
<script>
function clickBtn2() {
const p2 = document.getElementById("p2");
const p3 = document.getElementById("p3");
if (p2.textContent === "赤") {
p2.textContent = "青";
p3.style.visibility = "hidden"; //非表示
} else {
p2.textContent = "赤";
p3.style.visibility = "visible"; //表示
}
}
</script>
3行目のボタンを押すと6行目の関数を実行します。
7行目の引数のp2は、1行目のidのp2を指します。要素(オブジェクト)を取得します。
10行目は、textContentの文字を判定しています。
11,14行目は、文字を設定しています。
12,15行目は、文字列の表示と非表示を設定しています。
IDで探す範囲を指定してからクラスを検索
<div id="div1">
<div class="class1">テスト1</div>
</div>
<div id="div2">
<div class="class1">テスト2</div>
</div>
<input type="button" value="変更" onclick="clickBtn2()" />
<script>
const div2 = document.getElementById("div2");
const test1 = div2.getElementsByClassName("class1");
console.log(test1[0].textContent); //テスト2が出力される
</script>
10行目は、getElementByIdで対象(4~6行目)を指定しています。
11行目は、10行目の指定された範囲内でgetElementsByClassNameを実行します。
JavaScriptからボタンをクリックする(clickメソッド)
document.getElementById("test").click(); |
getElementByIdで対象を特定しclickメソッドでマウスをクリックしたときの動きになります。
<input type="button" value="b1" onclick="click1()" />
<input type="button" value="b2" id="b2" onclick="click2()" />
<script>
function click1() {
document.getElementById("b2").click();
}
function click2() {
console.log("2つめのボタンクリック");
}
</script>
1行目のボタンをクリックすると5行目の関数が実行され2行目のボタンがクリックされたときと同じ動きをします。
以下はMDNのgetElementByIdメソッドのリンクです。
https://developer.mozilla.org/ja/docs/Web/API/Document/getElementById
関連の記事
JavaScript getElementsByClassName クラスで取得
JavaScript 属性値を取得/設定/削除する(getAttribute)