JavaScriptで複数のクラス名で要素を取得する方法

2024-02-08 07:49 JavaScript クラス名 要素取得
  1. Document.querySelectorAll()メソッドを使用する方法: Document.querySelectorAll()メソッドを使用すると、CSSセレクタを使用して要素を取得できます。複数のクラス名を持つ要素を取得するには、クラス名をドット（.）で連結して指定します。

例:

const elements = document.querySelectorAll('.class1.class2');
  1. Array.from()とfilter()メソッドを使用する方法: Array.from()メソッドを使用してNodeListを配列に変換し、filter()メソッドを使用して要素を絞り込む方法もあります。

例:

const elements = Array.from(document.getElementsByClassName('class1 class2')).filter(element => element.classList.contains('class1') && element.classList.contains('class2'));
  1. ES6のスプレッド構文を使用する方法: ES6のスプレッド構文を使うと、要素のリストを結合して新しい配列を作成することができます。

例:

const class1Elements = document.getElementsByClassName('class1');
const class2Elements = document.getElementsByClassName('class2');
const elements = [...class1Elements, ...class2Elements];

これらの方法を使用すると、複数のクラス名で要素を効率的に取得することができます。どの方法を使用するかは、個々の要件とコードのシナリオによって異なります。必要に応じて適切な方法を選択してください。

以上が、JavaScriptで複数のクラス名で要素を取得する方法の簡単な解説です。