こんにちは、フローです。
今回は、
JavaScriptの便利な機能
「getElementsByClassName()」について、
具体的なコード例を挙げながら詳しく説明します。
目次
getElementsByClassName()とは？
まずは、「getElementsByClassName()」とは何なのか、から始めてみましょう。
この機能は、HTMLの要素をクラス名で取得するためのものです。
要素とは、ウェブページを構成する部品のことを指し、
これらの要素は色々な属性を持つことができます。
その中の一つがクラス名で、これを使って特定の要素をピックアップするのが
「getElementsByClassName()」の役割です。
どんな時に使うのか？
ウェブページを作っていて、特定のクラス名を持つ要素全てに対して何か処理をしたいときに
「getElementsByClassName()」は活躍します。
例えば、
同じデザインのボタンがたくさんあるページで、
全てのボタンに対して同じイベントを追加したいときなどに役立ちます。
getElementsByClassName()の使い方
それでは、実際のコードでどのように使うのか見ていきましょう。
以下に3つのパターンをご紹介します。
クラス名で要素を取得する
HTMLのクラス名を使って要素を取得します。
var elements = document.getElementsByClassName('myClass');
上の例では、’myClass’というクラス名を持つすべての要素を取得します。
パターン2: 取得した要素に対して処理を行う
取得した要素全てに対して同じ操作を行います。
var elements = document.getElementsByClassName('myClass');
for(var i = 0; i < elements.length; i++){
elements[i].style.color = 'red';
}
上の例では、’myClass’というクラス名を持つ全ての要素の文字色を赤に変更します。
パターン3: 特定の要素だけに処理を行う
取得した要素のうち、特定のものだけに操作を行います。
var elements = document.getElementsByClassName('myClass');
elements[0].style.color = 'red';
上の例では、’myClass’というクラス名を持つ要素のうち、最初の要素だけの文字色を赤に変更します。
getElementsByClassName()の注意点
「getElementsByClassName()」を使う際の注意点を一つ挙げてみましょう。
クラス名が存在しない場合
クラス名が存在しない場合、何も取得できないので操作が反映されません。
// このクラス名は存在しないため、エラーになる
var elements = document.getElementsByClassName('nonexistentClass');
elements[0].style.color = 'red';
上の例では、存在しないクラス名を指定しているため、エラーが発生します。
まとめ
今回はJavaScriptでウェブページの要素をクラス名で取得する
「getElementsByClassName()」
について学びました。
特定のクラス名を持つ要素全てに対して一斉に操作を行ったり、
特定の要素だけに操作を行ったりするときにとても役立ちます。
しかし、
クラス名が存在しない場合はエラーになるので注意が必要です。
コードを書く際には、必ずクラス名が正しいか確認しましょう。
JavaScriptの学習は、一つ一つの関数やメソッドを理解していくことが大切です。
「getElementsByClassName()」もその一つで、
これが理解できるとあなたのJavaScriptスキルはさらに深まります。
レッツチャレンジ！
最近のコメント