JavaScript のクラス名に基づいて要素を取得する

  2. プログラミングのヒント
  3. JavaScript ハウツー
  4. JavaScript のクラス名に基づいて要素を取得する
Nithin Krishnan 2023年12月11日
JavaScript
  1. Javascript .getElementsByClassName() 関数を使用して、CSS クラス名に基づいて要素を取得する
  2. Javascript .querySelector() 関数を使用して CSS クラス名に基づいて要素を取得する
  3. .querySelectorAll() 関数を使用して、CSS クラス名に基づいて複数の HTML 要素を取得する
JavaScript のクラス名に基づいて要素を取得する

実行時にスタイルを動的に変更するには、DOM から要素をクエリする必要がある場合があります。Javascript には、私たちの目的を果たすことができるさまざまな組み込み関数があります。これらの中で有名なものは .getElementById() です。ただし、.getElementById() は、HTML id が関数に渡されたパラメーターと一致する最初の要素である 1つの要素のみを返します。.getElementById() 関数のアプローチは、複数の要素のスタイルを同時に変更する場合は面倒な場合があります。HTML 要素に複数の ID を追加し、一度に 1つずつクエリを実行する必要があります。もっと良い方法でそれを行うことができますか？次のセクションでは、CSS クラス名に基づいて DOM から要素を取得する方法について詳しく説明します。

Javascript .getElementsByClassName() 関数を使用して、CSS クラス名に基づいて要素を取得する

Javascript には、CSS クラス名に基づいて複数の HTML 要素をクエリできるメソッド .getElementsByClassName() が組み込まれています。これは Document インターフェースで使用可能なメソッドであり、通常は document.getElementsByClassName() のように使用されます。関数は、関数パラメーターで指定された CSS クラス名を持つすべての要素をドキュメント（DOM）で検索します。

MDN Docsに従って、この関数は HTML 要素のライブコレクションを返します。これは、DOM 要素を直接変更するコードが存在する場合、getElementsByClassName() 関数によって返される要素が実行時に変更される可能性があることを意味します。

getElementsByClassName 構文

let el = document.getElementsByClassName(cssClassName);

cssClassName は、目的の CSS クラスを表す文字列である必要があります。複数の CSS クラスがある場合は、スペースで区切って言及できます（css-class1 css-class2 など）。

getElementsByClassName 引数

この関数は、CSS クラス名という 1つのパラメーターを取ります。場合によっては、要素を選択するために CSS クラス名の組み合わせが必要になることがあります。このようなシナリオでは、スペースで区切って複数の CSS クラス名を渡すことができます。

例

機能を理解するために、次のコードを参照してみましょう。

<div class="bold">Element 1: Bolder text</div>
<div class="green">Green text</div>
<div class="bold">Element 2: Bolder text</div>

window.onload = function() {
  let els = document.getElementsByClassName('bold');
  console.log(els);
}

出力：

HTMLCollection(2) [div.bold, div.bold]

上記のコードは、コンソールに HTML 要素のコレクションを記録します。Google Chrome コンソールには、上記のような出力が表示されます。window.onload 内に document.getElementsByClassName("bold") コードを記述することで、HTML がレンダリングされた後にのみコードが実行されるようになります。.getElementById() 関数とは異なり、getElementsByClassName() 関数は HTML 要素の配列を再実行することに注意してください。.getElementById() の場合のように、getElementsByClassName() によって出力される要素を直接操作することはできません。上記のコードの太字スタイルを最初の要素で通常に変更する場合は、次のコードを使用できます。

let els = document.getElementsByClassName('bold');
els[0].style.fontWeight = '100';

Javascript .querySelector() 関数を使用して CSS クラス名に基づいて要素を取得する

getElementsByClassName() は広く使用されているメソッドであり、CSS クラス名に基づいて HTML 要素を選択するように制限されています。Javascript には、Document インターフェースで使用できる別の組み込み関数 querySelector() があります。これは、より一般的な性質のものです。CSS クラス名に基づいて要素をクエリするために使用できます。この機能は、querySelector() の実際の機能のサブセットにすぎません。Javascript の querySelector() 関数は、引数で渡された選択パラメーターを満たす最初の要素を返すため、 .getElementById() に相当します。

.querySelector() 構文

構文は .getElementsByClassName() の構文と似ています。

let el = document.querySelector('.cssQuerySelector');

.querySelector() パラメータ

querySelector() は、css クエリセレクターを表すパラメータとして文字列データ型を受け入れます。CSS セレクターを使用して、選択した要素に特定のスタイルを適用するのと同じ方法です。ID に基づいて HTML 要素を選択するための #<id>、CSS のスタイルクラス名に基づいて要素を選択する .<css-class-name> などがあり、#<id>.<css-class-name> のように、2つを組み合わせて要素を選択することもできます。

例

次のコードは、.querySelector() の使用法を説明しています。

<div class="bold">Element 1: Bolder text</div>
<div class="green">Green text</div>
<div class="bold">Element 2: Bolder text</div>

window.onload = function() {
  let els = document.querySelector('.bold');
  console.log(els);
}

出力：

<div class="bold">Element 1: Bolder text</div>

出力は、グーグルクロームブラウザコンソールに表示されるとおりです。.querySelector() 関数は、それらのコレクションを返す .getElementsByClassName() とは異なり、HTML 要素を 1つだけ返すことに注意してください。したがって、それを処理する場合は、変更を直接適用できます。たとえば、選択した要素のフォントを通常に変更する場合、次のコードを使用してそれを実現できます。

window.onload = function() {
  let els = document.querySelector('.bold');
  els.style.fontWeight = '100';
}

.querySelectorAll() 関数を使用して、CSS クラス名に基づいて複数の HTML 要素を取得する

名前が示すように、Javascript の .querySelectorAll() 関数は、選択条件を満たす HTML 要素のコレクションを返します。.querySelector() と同様に、querySelectorAll() は CSS クエリセレクター文字列をパラメーターとして受け入れます。ライブではない HTML 要素の静的リストを返します。それに基づいてクエリされた複数の HTML 要素を返すため、.getElementsByClassName() と同様に動作しますが、これに限定されません。querySelector() と同様に、.querySelectorAll() を使用して、ID または CSS クラス名に基づいて要素を取得できます。CSS スタイルシートのクエリセレクターで要素を選択するのと同じです。

.querySelectorAll() 構文

document.querySelectorAll('<css-selector-string>');

.querySelectorAll() パラメータ

この関数は、CSS クエリ文字列を唯一の入力パラメーターとして受け入れます。id に基づいて要素を選択するには、パラメーター#<id> を使用する必要があります。また、CSS クラス名に基づいて選択するには、.<css-class-name> である必要があります。2つの組み合わせには、#<id>.<css-class-name> 形式を使用できます。

例

<div class="bold">Element 1: Bolder text</div>
<div class="green">Green text</div>
<div class="bold">Element 2: Bolder text</div>

let els = document.querySelectorAll('.bold');
console.log(els);

出力：

NodeList(2)
0: div.bold
1: div.bold

出力は、タイプノードリストの配列です。これらのノードを配列から選択し、要件に応じて CSS クラス値を変更することで、これらのノードをさらに処理できます。例は、次のコードで示されているとおりです。行 els[0].style.fontWeight = "100"; 最初に選択された HTML ノードを通常のフォントの太さにします。

<div class="bold">Element 1: Bolder text</div>
<div class="green">Green text</div>
<div class="bold">Element 2: Bolder text</div>

let els = document.querySelectorAll('.bold');
els[0].style.fontWeight = '100';
console.log(els);

出力：

NodeList(2)
0: div.bold
1: div.bold