Javascriptで要素の取得方法解説（querySelectorAll等）

Javascriptで要素の取得

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

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

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

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

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

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

通常idは1ページに対して一意（同じidの値を設定することはない）なので、単一の要素を返す。
指定したidの値の要素が存在しない場合はnullを返す。

<span id="id1">あ</span>
<span id="id2"></span>
<script>
  let id1=document.getElementById("id1");
  if(id1!==null){
    document.getElementById("id2").innerHTML=
      "属性id=「id1」の要素の属性innerHTMLの値は「"+id1.innerHTML+"」";
  }else{
    document.getElementById("id2").innerHTML=
      "属性idが「id1」の要素はありません";
  }
</script>

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

CSSのセレクタ指定で該当した要素を返す。
複数の要素が該当しても、最初の1つのみ要素を返す。
指定したCSSのセレクタ指定の要素が存在しない場合はnullを返す。

<span class="class11">あ</span>
<span class="class11">い</span>
<span class="class12" id="class12"></span>
<script>
  let class11=document.querySelector("span.class11");
  if(class11!==null){
    document.getElementById("class12").innerHTML=
      "タグがspanでクラスがclass11の要素の属性innerHTMLの値は「"+class11.innerHTML+"」";
  }else{
    document.getElementById("class12").innerHTML=
      "タグがspanでクラスがclass11の要素はありません";
  }
</script>

document.getElementsByClassName("クラス名");

クラス名を指定して、見つかった要素を配列で返します。
見つからなかった場合は0個の配列で返します。

<span class="class21">要素</span>
<span class="class22">要素</span>
<span class="class21">要素</span>
<span class="class23" id="class23"></span>
<script>
  let class21=document.getElementsByClassName("class21");
  document.getElementById("class23").innerHTML="class21の要素数は「"+class21.length+"」";
</script>

document.getElementsByTagName("タグ名");

タグ名を指定して、見つかった要素を配列で返します。
見つからなかった場合は0個の配列で返します。

<b>要素</b>
<b>要素</b>
<b>要素</b>
<span id="b1"></span>
<script>
  let tagB=document.getElementsByTagName("b");
  document.getElementById("b1").innerHTML="「b」タグの要素数は「"+tagB.length+"」";
</script>

document.getElementsByName("属性nameの値");

name属性の値を指定して、見つかった要素を配列で返す。
見つからなかった場合は0個の配列で返します。

<span name="nameA">要素</span>
<span name="nameB">要素</span>
<span name="nameA">要素</span>
<span id="name1"></span>
<script>
  let nameA=document.getElementsByName("nameA");
  document.getElementById("name1").innerHTML="属性「name=\"nameA\"」の要素数は「"+nameA.length+"」";
</script>

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

CSSのセレクタ指定で該当した要素を配列で返す。
見つからなかった場合は0個の配列で返します。

<input type="text" value='テキスト入力'><br>
<input type="text" value='テキスト入力'><br>
<input type="button" value='ボタンです'><br>
<span id="inputText"></span>
<script>
  let inputText=document.querySelectorAll('input[type="text"]');
  document.getElementById("inputText").innerHTML="inputタグで属性「type=\"text\"」の要素数は"+inputText.length;
</script>