JavaScript getElementsByClassName クラスで取得

JavaScriptのクラスで取得/設定するサンプルです。
getElementsByClassNameメソッドを使用します。

目次

説明 クラスで取得/設定するメソッド
サンプル 2つのボタンを同じクラス名にして1つの機能を使用する
  value値を取得/設定する+背景色を変える
  文字列の変更+文字列の表示/非表示

クラスで取得/設定するメソッド

変数 = document.getElementsByClassName(クラスの値);

getElementsByClassNameメソッドは、クラスの値を指定して要素(HTMLCollection)を取得します。

 

クラスとは?

テキストボックスのhtmlがあるとします。(input type="text"です)
このとき赤字がクラスで、その右にあるのがクラスの値です。

  • クラス・・・class
  • クラスの値・・・text1

 

戻り値

  • getElementsByClassNameメソッドの戻り値は、対象のHTMLCollectionです。
  • 上記例のhtmlに対してgetElementsByClassName("text1")とした場合、
    戻りの変数.item(0)とすれば、要素(Element)である
    「<input type="text" class="text1" value="赤" maxlength="5">」を取得できます。
  • get(取得する) + Elements(要素) + By + ClassName(クラス名)です。
  • 注意ポイントは、Elementsと複数形なので要素を複数取得する場合があります。

 

HTMLCollectionのイメージ

  • HTMLCollectionとは、要素群の集合を表現したインターフェイスです。
  • 以下は、HTMLCollectionのイメージです。
  • メソッドとプロパティを使えます。
  • 以下はMDNのHTMLCollectionのリンクです。
    https://developer.mozilla.org/ja/docs/Web/API/HTMLCollection

 

似ている他のメソッド

ID属性がある場合は、getElementByIdで「HTMLCollection」ではなく「要素」を取得できます。
querySelectorやquerySelectorAllであればCSSのセレクタで「要素」を取得できます。

 

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行目以降は、文字を入れ替えるロジックです。

 

value値を取得/設定する+背景色を変える

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

 

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

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

<script>
    function clickBtn1() {
        const div1 = document.getElementById("div1");
        const class1 = div1.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";
            }
        } else {
            for (let i = 0; i < class1.length; i++) {
                class1.item(i).value = "赤";
                class1.item(i).style.background = "#FA8072";
            }
        }
    }
</script>

5行目のボタンを押すと8行目の関数を実行します。
10行目の先頭はdocumentではなく、9行目で取得したdiv1です。
getElementsByClassNameメソッドの引数のclass1は、2,3行目のclass1クラスを指します。複数の要素を取得します。
14,19行目は、valueに値を設定しています。
15,20行目は、背景色を設定しています。

 

文字列の変更+文字列の表示/非表示

ボタンを押すと2行目の文字列が代わり3行目の文字列が表示と非表示で切り替わります。

テスト テスト

 

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

<div id="div2">
    <p><span class="p1">赤</span> <span class="p1">赤</span></p>
    <p><span class="p2">赤</span> <span class="p2">赤</span></p>
    <p><span class="p3">テスト</span> <span class="p3">テスト</span></p>
</div>
<input type="button" value="変更" onclick="clickBtn2()" />

<script>
    function clickBtn2() {
        const div2 = document.getElementById("div2");
        const class2 = div2.getElementsByClassName("p2");
        const class3 = div2.getElementsByClassName("p3");

        if (class2.item(0).textContent === "赤") {
            for (let i = 0; i < class2.length; i++) {
                class2.item(i).textContent = "青";
                class3.item(i).style.visibility = "hidden"; //非表示
            }
        } else {
            for (let i = 0; i < class2.length; i++) {
                class2.item(i).textContent = "赤";
                class3.item(i).style.visibility = "visible"; //表示
            }
        }
    }
</script>

6行目のボタンを押すと9行目の関数を実行します。
11行目の先頭はdocumentではなく、10行目で取得したdiv2です。
getElementsByClassNameメソッドの引数のp2は、3行目のp2クラスを指します。複数の要素を取得します。
16,21行目は、textContentに値を設定しています。
17,22行目は、文字列の表示と非表示を設定しています。

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

関連の記事

JavaScript getElementById ID属性で取得/設定する
JavaScript タグ名で取得/設定する(getElementsByTagName)
JavaScript 全ての子の要素を取得/設定する(children)
JavaScript 属性値を取得/設定/削除する(Attribute)

△上に戻る