JavaScript 要素に特定のクラスが含まれているかどうかを効率的に確認するにはどうすればよいですか?

JavaScript で要素にクラスが含まれているかどうかを確認する方法

JavaScript で要素に特定のクラスが含まれているかどうかを確認するのは一般的なタスクです。 switch ステートメントを使用して要素のクラス属性を比較することは可能ですが、このメソッドには複数のクラスを持つ要素を扱う場合に制限があります。

より堅牢な解決策として、element.classList.contains メソッドの使用を検討してください。

element.classList.contains('class-name');

このメソッドは、要素が指定されたクラスを持つ場合は true を返し、それ以外の場合は false を返します。最新のブラウザをすべてサポートしており、古いブラウザでもポリフィルを使用できます。

代替アプローチ:

古いブラウザをサポートする必要があり、ポリフィルがオプションではない場合は、次のことができます。次の調整されたindexOfメソッドを使用します:

function hasClass(element, className) {
  return (' ' + element.className + ' ').indexOf(' ' + className + ' ') > -1;
}

このメソッドは、検索が以下の範囲内で実行されることを保証します。クラス属性全体を使用して、部分一致による誤検知を防ぎます。

例への適用:

提供された例では、hasClass メソッドを使用してコードを簡素化できます。

var test = document.getElementById('test');

for (var i = 0, j = classes.length; i < j; i++) {
  if (hasClass(test, classes[i])) {
    test.innerHTML = 'I have ' + classes[i];
    break;
  }
}

このコードはクラスの配列を反復処理し、クラスのいずれかが含まれているかどうかを確認します。要素のクラス属性。これは、switch ステートメントや文字列マッチングを使用するよりも効率的で柔軟なソリューションです。

以上がJavaScript 要素に特定のクラスが含まれているかどうかを効率的に確認するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。