JavaScriptでクラス名を使用して要素を取得する方法


方法1: querySelectorAllを使用する方法 querySelectorAllメソッドを使用すると、指定したクラス名を持つすべての要素のリストが返されます。次のようにコードを記述します。

const elements = document.querySelectorAll('.クラス名');

上記の例では、変数elementsに指定したクラス名を持つすべての要素が格納されます。要素にアクセスするには、通常の配列のようにelementsを操作します。

elements.forEach(element => {
  // 要素に対する処理を記述
});

方法2: getElementsByClassNameを使用する方法 getElementsByClassNameメソッドを使用すると、指定したクラス名を持つ要素のリストが返されます。次のようにコードを記述します。

const elements = document.getElementsByClassName('クラス名');

上記の例では、変数elementsに指定したクラス名を持つ要素が格納されます。要素にアクセスするには、通常の配列のようにelementsを操作します。

for (let i = 0; i < elements.length; i++) {
  const element = elements[i];
  // 要素に対する処理を記述
}

以上が、JavaScriptでクラス名を使用して要素を取得する方法です。これらの方法を使えば、指定したクラス名を持つ要素に対して簡単に処理を行うことができます。