JavaScript getElementByIdでIDから値を取得

nas2017/04/12

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)

△上に戻る