JavaScriptでHTML要素を取得する方法：getElementById・querySelector・querySelectorAllの使い方

Javascriptで要素を取得する方法

Javascriptで要素を取得する代表的な関数は以下が存在します。

単一の要素を取得して返す関数

1. document.getElementById("属性idの値");
2. document.querySelector("CSSセレクタ指定");

複数の要素を取得して要素を配列で返す関数

1. document.getElementsByClassName("クラス名");
2. document.getElementsByTagName("タグ名");
3. document.getElementsByName("属性nameの値");
4. document.querySelectorAll("CSSセレクタ指定");

太字で記述されている
document.getElementById("属性idの値")
document.querySelector("CSSセレクタ指定")
document.querySelectorAll("CSSセレクタ指定")
についてのみ解説していきます。

document.getElementById("属性idの値")

指定した属性IDの値の要素を取得するメソッドです。

  <div id="first" style="margin:2px;background:#CCF;">
    id=first のDIVタグ
  </div>
  <div id="second" style="margin:2px;background:#CFC;">
    id=second のDIVタグ
  </div>
  <input type="button" onclick="test1()" value="IDから要素を取得">
  <script>
    function test1(){
      //id=firstの要素を取得
      let elm=document.getElementById("first");
      //取得した要素の内部HTMLを表示する
      alert(elm.innerHTML);
    }
  </script>

document.querySelector("CSSセレクタ指定")

指定したCSSセレクタの要素を取得するメソッドです。該当する要素が複数あっても最初の１つだけを返してきます。
例えば
id="aaa" の要素を取得したい場合
document.querySelector("#aaa")
class="aaa" の要素を取得したい場合
document.querySelector(".aaa")

CSSセレクタの詳細については https://mam-mam.net/javascript/css_selector.html をご参考ください。

<div class="test2" style="margin:2px;background:#CFC;">
  class=test2 の2つ目のDIVタグ
</div>
<input type="button" onclick="test2()" value="CSSのセレクタ指定で最初の要素を１つ取得">
<script>
  function test2(){
    //class=test2の最初の要素を取得
    let elm=document.querySelector(".test2");
    //取得した要素の内部HTMLを表示する
    alert(elm.innerHTML);
  }
</script>

document.querySelectorAll("CSSセレクタ指定")

document.querySelectorと同じく指定したCSSセレクタの要素を取得するメソッドですが、該当する要素が１つでも複数でも配列で返してきます。

class=test3 のPタグ

<div class="test3" style="margin:2px;background:#CCF;">
  class=test3 の1つ目のDIVタグ
</div>
<div class="test3" style="margin:2px;background:#CFC;">
  class=test3 の2つ目のDIVタグ
</div>
<p class="test3" style="margin:2px;background:#FCC;">
  class=test3 のPタグ
</p>
<input type="button" onclick="test3()" value="CSSのセレクタ指定で要素を全て取得して境界線を変更する">
<script>
  function test3(){
    //divタグでclass=test3の要素を配列で取得
    let elms=document.querySelectorAll("div.test3");
    for(let i=0;i<elms.length;i++){
      if(elms[i].style.borderWidth=="2px"){
        elms[i].style.border="none";
      }else{
        elms[i].style.border="2px solid #00F";
      }
    }
  }
</script>