目次
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)