【js】getElementById

HTML要素を取得

あくまで取得だけである
頻出である。シチュエーションはこうだ。

A子に「告白したい」
A子に「と話したい」
A子に「にプレゼントを渡したい」

A子ちゃんに部分を”アクセス”部分、「」内を”動作部分”とするとgetElementByIdは、”アクセス”部分になる。
そのため、そのあとの動作は＋αで記述する必要がある。単体では要素を取得するだけ。

書き方

document.getElementById('★★')、★★部分に取得したいHTMLのidを入力する。

  <!-- 取得 -->
  <div id="content">
    <h1 id="tt-l">12月17日の献立</h1>
    <h2 id="tt-m">野菜炒め定食</h2>
    <p>健康的でおいしかった！特に胡椒が効いていた。</p>
  </div>

  <input type="button" id="change-btn"  value="内容を変更する">

<script>
//アクセスしてHTML要素を取得（→代入）
const TT_l = document.getElementById('tt-l');
console.log(TT_l);

</script>

  <!-- 取得した要素 -->
  <h1 id="tt-l">12月17日の献立</h1>
</script>

取得 + 変更 のお決まりの書き方

冒頭でも述べたが、getElementByIdは、アクセスしてHTML要素を取得するだけだ。
その後、1.その取得した要素を変数に代入　2.それにメソッドをくっつけて料理する

<script>
//1. アクセスしてHTML要素を取得（→代入）
const 変数 = document.getElementById('ID');

//2. メソッドをくっつけて料理
変数.メソッド();
</script>

ここからは例で覚えろ

innerHTML (HTML要素を変更)

  <!-- 取得 -->
  <div id="content">
      <h1 id="tt-l">12月17日の献立</h1>
      <h2 id="tt-m">野菜炒め定食</h2>
      <p>健康的でおいしかった！特に胡椒が効いていた。</p>
  </div>

  <input type="button" id="change-btn"  value="内容を変更する">

↓
クリックすると斜体になりテキストが変更された

<script>
$('#change-btn').click(function(){

    // アクセスしてHTML要素を取得（→代入）
    const TT_l = document.getElementById('tt-l');

   // アクセスした要素が入っている変数にメソッドをつけて要素を変更する
    TT_l.innerHTML = '<i>12月31日の献立</i>';
    console.log(TT_l);

});</script>

※innerHTMLに似てるもので、textContentがあるが以下違う
innerHTML：タグをタグで認識する
textContent：タグを文字列で認識する（タグがそのまま表に表示されるということ）

style (CSSのを変更)

クリックするとデザインが変更された

<script>
$('#change-btn').click(function(){

    //アクセスしてHTML要素を取得（→代入）
    const TT_M = document.getElementById('tt-m');
    
    //アクセスしてCSSを変更
    TT_M.style = 'color:#F0E675; background:#333;font-size:30px;';
});
</script>

+αでフォームなどのvalue属性の値も取得できる

アクセスする末尾に.valueを追加するだけでOK
ユーザーが入れる部分なので変更というよりは、取得して何かの値として使うことや表示することが多い。
以下は、生まれてくる子供の身長を予想するプログラムである
inputで入力された両親の身長のvalueを取得して計算式の値にしている。<式>
男子＝ （両親の身長の合計＋13）/ 2＋2
女子＝ （両親の身長の合計－13）/ 2＋2

    <h1 id="tt-l">こどもの予想身長検索</h1>
    <p>数値を入力して計算ボタンをクリックしてください。</p>

    <lavel>こどもの性別</lavel>
    <select id="sex">
      <option value="男の子">男の子</option>
      <option value="女の子">女の子</option>
    </select>
    <p></p>

       <lavel>父親の身長(cm)</lavel>
    <input id="father-height" type="number" value="" placeholder="(例) 170">
    <p></p>
    <lavel>母親の身長(cm)</lavel>
    <input id="mother-height" type="number" value="" placeholder="(例) 155">
    <p></p>
    <input id="execute-btn" type="button" value="計算">

$('#execute-btn').click(function(){
    //プルダウンのvalueを取得
    const SEX = document.getElementById('sex').value;

    //アクセスして身長のinputのvalueで取得
    let father_height = document.getElementById('father-height').value;
    let mother_height = document.getElementById('mother-height').value;

    if( father_height == '' || mother_height == ''){
         alert('もう一度身長をいれてください。');
    }else{
        //文字列→数値
        father_height = Number(father_height);
        mother_height = Number(mother_height);

        //計算
        if(SEX == '男の子'){
          const RESULT = ( father_height + mother_height + 13 ) / 2 + 2;
          alert('将来の生まれる男の子の予想身長は' + RESULT + 'です。');
          document.location.reload()
        }else{
          const RESULT = ( father_height + mother_height - 13 ) / 2 + 2;
          alert('将来の生まれる女の子の予想身長は' + RESULT + 'です。');
          document.location.reload()
        }
  }
});

入力して計算ボタンを押すと将来のこどもの予想身長が表示される