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

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

目次

説明 属性がIDの値を指定して取得する/設定するメソッド
サンプル value値を取得/設定する+背景色を変える
  文字列の変更+文字列の表示/非表示

属性がIDの値を指定して取得する/設定するメソッド

変数 = document.getElementById(idの値);
  • 属性がidの値(属性値)を指定して要素(オブジェクト)を取得します。
  • 対象のidの値が存在しない場合はnullが返ります。

属性と属性値とは?

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

<input type="text" id="text1" value="赤" maxlength="5">
  • このとき黄色の箇所が属性でその右横にあるのが属性値です。inputは要素です。
  • 要素・・・input
  • 属性・・・type,id,value,maxlength
  • 属性値・・・text,text1,赤,5

戻り値

  • getElementByIdメソッドの戻り値は、対象の要素(Element)です。
  • 上記例のhtmlに対してgetElementById("text1")とした場合、
    「<input type="text" id="text1" value="赤" maxlength="5">」を取得します。
  • get(取得する) + Element(要素) + By + Id(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";
    } else {
      input1.value = "赤";
      input1.style.background = "#FA8072";
    }
  }
</script>

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

 

文字列の変更+文字列の表示/非表示

ボタンを押すと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>

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

以下はMDNのgetElementByIdメソッドのリンクです。
https://developer.mozilla.org/ja/docs/Web/API/Document/getElementById

関連の記事

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

△上に戻る