目次
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="赤" 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行目は、文字列の表示と非表示を設定しています。
複数のボタンを同じクラス名にして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行目以降は、文字を入れ替えるロジックです。
引数に複数のセレクタを指定する(空白区切り)
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を使用します。
関連の記事
JavaScript getElementByIdでIDから値を取得
JavaScript 属性値を取得/設定/削除する(getAttribute)