JavaScript getElementsByClassName クラスで取得

目次

JavaScript getElementsByClassNameとは
getElementsByClassNameでvalue値を取得する
サンプル 背景色と文字の色を変える
  文字列を変える、表示非表示
  複数のボタンを同じクラス名にして1つの機能を使用する
引数に複数のセレクタを指定する(空白区切り)
引数で呼び出した場所を区別

getElementsByClassNameとは

document.getElementsByClassName(クラスの値);

引数にクラスの値を指定して要素(HTMLCollection)を返します。

get(取得する) + Elements(複数要素) + By + ClassName(クラス名)です。

 

HTMLCollectionのイメージ

HTMLCollectionとは、要素群の集合を表現したインターフェイスです。
メソッドとプロパティを使えます。

似ている他のメソッド

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

 

getElementsByClassNameでvalue値を取得する

コード例1

<input type="text" class="text1" value="red" maxlength="5" />
<input type="text" class="text1" value="blue" maxlength="5" />

<script>
    const text1 = document.getElementsByClassName("text1");
    for (let i = 0; i < text1.length; i++) {
        console.log(text1.item(i).value); //red blue
    }

    let textid = "text1";
    const text2 = document.getElementsByClassName(textid);
    for (let i = 0; i < text2.length; i++) {
        console.log(text2.item(i).value); //red blue
    }
</script>

5行目のgetElementsByClassNameで1,2行目を取得します。
8行目のitem(i)で1,2行目を分けて取得できます。
11行目のようにgetElementsByClassNameの引数に変数を指定することも可能です。

 

コード例2

getElementsByClassNameで探す範囲を絞ることも可能です。

<div class="div1">
    <p class="p1">red</p>
</div>
<div class="div1">
    <p class="p1">blue</p>
</div>
<div class="div2">
    <p class="p1">yellow</p>
</div>

<script>
    const d1 = document.getElementsByClassName("div1");
    const p1 = d1.item(1).getElementsByClassName("p1");
    console.log(p1.item(0).textContent); //blue
</script>

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

 

背景色と文字の色を変える

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

 

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

<input type="text" value="red" class="class1" maxlength="6" />
<input type="text" value="red" class="class1" maxlength="6" />
<input type="button" value="click" onclick="clickBtn11()" />

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

        if (class1.item(0).value === "red") {
            for (let i = 0; i < class1.length; i++) {
                class1.item(i).value = "blue";
                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 = "red";
                class1.item(i).style.background = "rgb(250,128,114)";
                class1.item(i).style.color = "blue";
            }
        }
    }
</script>

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

 

文字列を変える、表示非表示

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

red

 

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

<p class="p11">red</p>
<p class="p12" style="visibility: hidden">red</p>
<input type="button" value="click" onclick="clickBtn12()" />

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

        if (p1.item(0).textContent == "red") {
            p1.item(0).textContent = "blue";
        } else {
            p1.item(0).textContent = "red";
        }
        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行目は、文字列の表示と非表示を設定しています。

 

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

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

red

 

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

<p id="p4">red</p>
<input type="button" value="click1" class="btn31" />
<input type="button" value="click2" class="btn31" />

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

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

    function clickBtn31() {
        const p4 = document.getElementById("p4");
        if (p4.textContent === "red") {
            p4.textContent = "blue";
        } else {
            p4.textContent = "red";
        }
    }
</script>

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

 

引数に複数のセレクタを指定する(空白区切り)

document.getElementsByClassName("クラス名 クラス名");
<p class="sp1">red</p>
<p class="sp1 sp2">blue</p>

<script>
    const text1 = document.getElementsByClassName("sp1 sp2");

    for (let i = 0; i < text1.length; i++) {
        console.log(text1.item(i).textContent); //blue
    }
</script>

5行目は、メソッドの引数に半角スペース区切りでクラスを2つ指定しています。
※cssの階層構造で指定するときは、querySelectorまたはquerySelectorAllを使用します。

 

引数で呼び出した場所を区別

関数は一つで、ボタンを押した箇所のみ処理を行います。

red

red

red

red

 

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

<p class="p11">red</p>
<p class="p11">red</p>
<input type="button" value="change" onclick="clickBtn(11)" />
<p class="p12">red</p>
<p class="p12">red</p>
<input type="button" value="change" onclick="clickBtn(12)" />
<script>
    function clickBtn(num) {
        const str = "p" + num;
        const p1 = document.getElementsByClassName(str);

        for (let i = 0; i < p1.length; i++) {
            if (p1.item(i).textContent == "red") {
                p1.item(i).textContent = "blue";
            } else {
                p1.item(i).textContent = "red";
            }
        }
    }
</script>

9行目は、固定文字のPと変数(引数)の値でclassを動的に作成します。

関連の記事

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

△上に戻る