今回はgetElementsByClassNameについて、学んだことをお話しします。
class属性とは？class属性とid属性の違い
～Crebitテキストより～
class属性は、複数の要素に同じ名前を付けて、グループとしてまとめて扱うことができるものです。
（class=”〇〇”で、〇〇のところをclass 名と呼びます。）
ちなみに、Nの勉強日記17：getElementByIdでid属性について書きましたが、id属性は、HTMLの中にある1つの要素だけに付ける名前札のようなものです。
class属性とid属性の違いまとめ
| class属性 | id属性 |
| 共通の性質を持ったものの集まりを示す ・同じclass名を複数のタグにつけられる ・1つのタグに複数のclass名をつけられる | 1つだけであることを示す ・ページ内では同じid名は使えない ・1つのタグに1つのidのみ |
| 属性の書き方 <h1 class =”name”>テキスト</h1> ～複数つける場合～ <h1 class =”name1 name2”>テキスト</h1> （名前の間に半角スペース） CSSでは .クラス名 で指定。 .name{color:pink;} | 属性の書き方 <h1 id =”name”>テキスト</h1> ～複数つける場合～ ※複数つけられない CSSでは #id名 で指定。 #name{color:pink;} |
getElementsByClassNameについて
getElementsByClassNameは、同じclass名を持つ複数の要素をまとめて取得できるものです。
以下のように使います。
index.html
<p class = “crebi”>くれびはCrebitのマスコットキャラクターです</p>
<p class = “crebi”>くれびはCrebitのマスコットキャラクターです</p>
sample.js
let el = document.getElementsByClassName(“crebi”);
また、getElementsByClassNameは配列と同じようにlength（要素数）やインデックス番号を使ってループ処理ができる、配列のような処理もできます。
（ただし、JavaScriptの配列が持っている関数（push() など）を直接使うことはできません。）
index.html
<p class = “crebi”>くれびはCrebitのマスコットキャラクターです</p>
<p class = “crebi”>くれびはCrebitのマスコットキャラクターです</p>
sample.js
let el = document.getElementsByClassName(“crebi”);
for (let i = 0 ; i < el.length ; i = i + 1) { //要素の数だけ繰り返す
console.log(el. item(i).textContent)
getElementsByClassNameを使う場面
では、実際にどんなときに getElementsByClassName を使うのでしょうか？
ポイントは、「同じクラス名が付いた複数の要素をまとめて扱いたいとき」 です。
たとえば次のような場面が挙げられます。
① デザインをそろえた複数のパーツに、同じ処理をしたいとき
例：ニュース一覧、商品カード、コメント一覧 など
すべてに「fade-in」などのクラスが付いている場合、そのクラスをまとめて取得し、スクロール時にアニメーションを追加する、といった処理ができます。
let items = document.getElementsByClassName(“fade-in”);
for (let i = 0; i < items.length; i=i+1) {
items[i].classList.add(“show”);
}
② パーツごとにテキストを書き換える必要があるとき
たとえば「price」というクラスが複数の場所にある場合、セール時にまとめて価格部分を書き換えるといった処理が可能です。
let prices = document.getElementsByClassName(“price”);
for (let i = 0; i < prices.length; i=i+1) {
prices[i].textContent = “セール中！”;
}
③ 同じカテゴリの要素を一気に非表示・表示したいとき
ユーザーの操作に合わせて、複数の要素の表示／非表示を一括で切り替えるのにも便利です。
let notes = document.getElementsByClassName(“note”);
for (let i = 0; i < notes.length; i=i+1) {
notes[i].style.display = “none”;
}
まとめ
getElementsByClassNameは、複数の要素をまとめて取得できるもので、配列のような処理ができます。
使う場面としては、
・複数の要素に同じ処理をしたいとき
・一括でスタイル変更したいとき
・共通カテゴリとしてクラスを付けているとき
などがあります。
このように、「グループとして扱いたい要素がある」 ときに、getElementsByClassName はとても便利です。
これだけで基本からしっかりに身につく HTML/CSS＆Webデザイン 一冊目の本 竹内直人、竹内瑠美著