【js】getElementsByClassName

概要はgetElementByIdの記事を参照してほしい。

書き方

getElementsByClassName('★★')、★★部分に取得したいHTMLのclassを入力する。

  <!-- 取得 -->
    <p class="sumple">サンプルテキストA</p>
    <p class="sumple">サンプルテキストB</p>
    <p class="sumple test">サンプルテキストC</p>

    <input type="button" id="execute-btn" value="実行">

<script>
$('#execute-btn').click(function(){
    const TEXT = document.getElementsByClassName('sumple');
    console.log(TEXT[0]);
    console.log(TEXT[1]);
});
</script>

結果：取得情報

<p class="sumple">サンプルテキストA</p>
<p class="sumple">サンプルテキストB</p>

【解説】
同じクラス名のHTMLを全て取得してくる。

ここからは例で覚えろ

複数class指定されているHTML要素を取得したいとき

  <!-- 取得 -->
    <p class="sumple">サンプルテキストA</p>
    <p class="sumple">サンプルテキストB</p>
    <p class="sumple test">サンプルテキストC</p>

    <input type="button" id="execute-btn" value="実行">

<script>
$('#execute-btn').click(function(){
    const TEXT = document.getElementsByClassName('test sumple');
    console.log(TEXT[0]);
});
</script>

結果：取得情報

<p class="sumple test">サンプルテキストC</p>

同じようにそのまま複数classを（）内に入れればOK。
結果見てわかるようにclassの順番は逆でもOKだが、完全一致のものだけ取得してくる。
（どちらか片方だけのHTMLは無視される）

document部分を変えると対象範囲を狭めれる

document.　　→　ページ全体が対象
idの範囲指定. →　idで囲われたソースコードが対象

そのため、
1. const 定数（変数） = getElementById()で対象範囲のHTMLを取得
2. document.getElementsByClass()の「document.」部分を 1. の要素を代入した変数を入れる
3. const 定数（変数）.getElementsByClass()で完成。

 <div id="content-1">    
    <p class="sumple">サンプルテキストA</p>
    <p class="sumple">サンプルテキストB</p>
</div>

<!-- content-2内のsumpleクラスがついたHTMLを取得したい  -->
<div id="content-2">    
  <p class="sumple">This is LemonA</p>
  <p class="sumple">This is LemonB</p>
</div>

<input type="button" id="execute-btn" value="実行">

<script>
$('#execute-btn').click(function(){
  const DIV = document.getElementById('content-2');
  const TEXT = DIV.getElementsByClassName('sumple');
    console.log(TEXT[0]);
    console.log(TEXT[1]);
});
</script>

結果：取得情報

<p class="sumple">This is LemonA</p>
<p class="sumple">This is LemonB</p>

おまけ

2つは似ているがsの有無に注意
getElementById
getElementsByClassName

参考記事
https://www.sejuku.net/blog/68588www.sejuku.net