JavaScriptのgetElementsByClassNameのクラスで値を取得するサンプルです。
目次
サンプル | getElementsByClassNameとは |
getElementsByClassNameを使用する例 | |
value値を取得設定、背景と文字の色を変える | |
文字の変更、文字の表示非表示 | |
2つのボタンを同じクラス名にして1つの機能を使用する | |
1つのクラスにある複数のセレクタを指定する(空白区切り) | |
複数のclassの値を指定しANDで絞り込む |
getElementsByClassNameとは
document.getElementsByClassName(クラスの値); |
クラスの値を指定して要素(HTMLCollection)を返します。
HTMLCollectionのイメージ
HTMLCollectionとは、要素群の集合を表現したインターフェイスです。
メソッドとプロパティを使えます。
https://developer.mozilla.org/ja/docs/Web/API/HTMLCollection
getElementsByClassNameを使用する例
<input type="text" class="text1" value="red" maxlength="5" />
<input type="text" class="text1" value="blue" maxlength="5" />
<script>
const textbox1 = document.getElementsByClassName("text1");
for (let i = 0; i < textbox1.length; i++) {
console.log(textbox1.item(i).value); //red blue
}
</script>
1,2行目は、class="text1"があります。
5行目のgetElementsByClassName("text1")で1,2行目を取得します。
8行目のitem(i)で1,2行目を分けて取得できます。
get(取得する) + Elements(複数要素) + By + ClassName(クラス名)です。
似ている他のメソッド
ID属性がある場合は、getElementByIdで「HTMLCollection」ではなく「要素」を取得できます。
querySelectorやquerySelectorAllであればCSSのセレクタで「要素」を取得できます。
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 属性値を取得/設定/削除する(getAttribute)