JavaScript getElementsByClassName クラスで取得

JavaScriptのgetElementsByClassNameのサンプルです。

説明 getElementsByClassNameとは
使用例 value値を取得設定、背景と文字の色を変える
  文字の変更、文字の表示非表示
  2つのボタンを同じクラス名にして1つの機能を使用する
1つのクラスにある複数のセレクタを指定する(空白区切り)
複数のclassの値を指定しANDで絞り込む

getElementsByClassNameとは

構文 document.getElementsByClassName(クラスの値);
クラスの値を指定して要素(HTMLCollection)を取得します。
クラスとは
テキストボックスのhtmlです。赤字がクラスでその右にあるのがクラスの値です。
戻り値 HTMLCollection
上記例に対してgetElementsByClassName("text1")とした場合、
戻りの変数.item(0)で、要素(Element)である
<input type="text" class="text1" value="赤" maxlength="5">を取得します。 get(取得する) + Elements(複数要素) + By + ClassName(クラス名)です。
HTMLCollectionとは HTMLCollectionとは、要素群の集合を表現したインターフェイスです。
以下は、HTMLCollectionのイメージです。

メソッドとプロパティを使えます。
https://developer.mozilla.org/ja/docs/Web/API/HTMLCollection
似ている他のメソッド ID属性がある場合は、getElementByIdで「HTMLCollection」ではなく「要素」を取得できます。
querySelectorやquerySelectorAllであればCSSのセレクタで「要素」を取得できます。
JavaScript getElementById ID属性で取得/設定する
JavaScript querySelector セレクタで要素を取得
JavaScript querySelectorAll 複数要素を取得

value値を取得設定、背景と文字の色を変える

ボタンを押すとテキストボックス内の文字(value値)が変化し背景色が変わります。

 

上記サンプルのコードです。

<input type="text" value="赤" class="class1" maxlength="6" />
<input type="text" value="赤" class="class1" maxlength="6" />
<input type="button" value="変更" onclick="clickBtn1()" />

<script>
  function clickBtn1() {
    const class1 = document.getElementsByClassName("class1");

    if (class1.item(0).value === "赤") {
      for (let i = 0; i < class1.length; i++) {
        class1.item(i).value = "青";
        class1.item(i).style.background = "#87CEFA";
        class1.item(i).style.color = "red";
      }
    } else {
      for (let i = 0; i < class1.length; i++) {
        class1.item(i).value = "赤";
        class1.item(i).style.background = "rgb(250,128,114)";
        class1.item(i).style.color = "blue";
      }
    }
  }
</script>

3行目のボタンを押すと6行目の関数を実行します。
7行目のメソッドの引数のclass1は1,2行目のクラスを指し複数の要素を取得します。
11行目からは、value値、背景色、文字色を設定しています。

 

文字の変更、文字の表示非表示

ボタンを押すと文字の変更と表示非表示が行われます。

 

上記サンプルのコードです。

<p class="p11">赤</p>
<p class="p12" style="visibility: hidden">赤</p>
<input type="button" value="変更" onclick="clickBtn2()" />

<script>
  function clickBtn2() {
    const p1 = document.getElementsByClassName("p11");
    const p2 = document.getElementsByClassName("p12");

    if (p1.item(0).textContent == "赤") {
      p1.item(0).textContent = "青";
    } else {
      p1.item(0).textContent = "赤";
    }
    if (p2.item(0).style.visibility == "visible") {
      p2.item(0).style.visibility = "hidden"; //非表示
    } else {
      p2.item(0).style.visibility = "visible"; //表示
    }
  }
</script>

3行目のボタンを押すと6行目の関数を実行します。
7行目のメソッドの引数のp11は、1,2行目のクラスを指し複数の要素を取得します。
11,15行目は、文字列の表示と非表示を設定しています。

 

2つのボタンを同じクラス名にして1つの機能を使用する

どちらのボタンを押しても同じ1つの関数を呼出し文字列を変更します。

 

上記サンプルのコードです。

<p id="p4">赤</p>
<input type="button" value="ボタン1" class="btn4" />
<input type="button" value="ボタン2" class="btn4" />

<script>
  const btn4 = document.getElementsByClassName("btn4");

  for (var i = 0; i < btn4.length; i++) {
    btn4[i].onclick = function () {
      clickBtn4();
    };
  }

  function clickBtn4() {
    const p4 = document.getElementById("p4");
    if (p4.textContent === "赤") {
      p4.textContent = "青";
    } else {
      p4.textContent = "赤";
    }
  }
</script>

6行目は、getElementsByClassNameメソッドで指定のクラス名を取得しています。
8行目は、取得したクラス名分ループさせています。
9行目は、取得したクラスと14行目のメソッドをonclickのイベントハンドラで結びつけています。
2行目または3行目のボタンを押すと14行目が実行されます。
14行目以降は、文字を入れ替えるロジックです。

 

1つのクラスにある複数のセレクタを指定する(空白区切り)

document.getElementsByClassName("クラス名 クラス名");
<p class="sp1 sp2">赤</p>
<input type="button" value="変更" onclick="clickBtn3()" />

<script>
  function clickBtn3() {
    const sp = document.getElementsByClassName("sp1 sp2");

    if (sp.item(0).textContent === "赤") {
      sp.item(0).textContent = "青";
    } else {
      sp.item(0).textContent = "赤";
    }
  }
</script>

6行目は、メソッドの引数に半角スペース区切りでクラスを2つ指定しています。andになります。

複数のclassの値を指定しANDで絞り込む

<div class="div1">
  <p class="p1">赤</p>
</div>
<div class="div1">
  <p class="p1">赤</p>
</div>
<input type="button" value="変更" onclick="clickBtn3()" />

<script>
  function clickBtn3() {
    const d1 = document.getElementsByClassName("div1");
    const p1 = d1.item(0).getElementsByClassName("p1");

    if (p1.item(0).textContent === "赤") {
      p1.item(0).textContent = "青";
    } else {
      p1.item(0).textContent = "赤";
    }
  }
</script>

12行目のitem(0)で1行目を指定しています。

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

関連の記事

JavaScript getElementById ID属性で取得/設定する
JavaScript 属性値を取得/設定/削除する(Attribute)

△上に戻る