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

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

JavaScript では、DOM 要素にクラスが含まれているかどうかを判断する必要があるシナリオが発生することがあります。特定のクラス。 element.className と switch ステートメントを使用した現在のアプローチは機能しますが、要素に複数のクラスがある場合には制限があります。

element.classList.contains() の使用

ブラウザ間の互換性を向上させるために、element.classList.contains() を利用できます。 method:

element.classList.contains(className);

このメソッドは、要素が指定されたクラスを持つかどうかを示すブール値を返します。これは、すべての主要なブラウザでサポートされています。

indexOf を使用した代替アプローチ

element.classList をサポートしていないレガシー ブラウザを使用している場合は、次のように変更できます。既存のindexOfアプローチは次のようになります:

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

これにより、探しているクラスが一致する場合にのみチェックがtrueを返すことが保証されます。 for は別のクラス名に含まれていません。

実装例

更新された手法を例に適用します。

var test = document.getElementById("test"),
    classes = ['class1', 'class2', 'class3', 'class4'];

test.innerHTML = "";

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

このアプローチでは、テスト要素に複数のクラスがある場合、その順序または追加のクラスが存在する場合でも、正しいクラスが確実に検出されます。

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