JavaScript에서 요소 클래스 존재를 효율적으로 확인하는 방법은 무엇입니까?

JavaScript에서 요소 클래스 존재 확인

기본 JavaScript를 사용하여 요소에 특정 클래스가 포함되어 있는지 어떻게 확인할 수 있습니까? className 속성을 사용할 때 정확한 클래스 일치가 필요하므로 요소에 여러 클래스가 있는 경우 제한이 발생합니다.

해결책: element.classList.contains

요소. classList는 이 목적을 위해 특별히 설계된 .contains 메소드를 노출합니다.

element.classList.contains(className);

이 메소드는 모든 최신 이전 버전에서는 폴리필될 수 있습니다.

대안: indexOf 사용

또는 classList 지원이 부족한 이전 브라우저의 경우 element.className 및 indexOf를 활용할 수 있지만, 정확성을 보장하려면 약간의 조정이 필요합니다.

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

이렇게 하면 원하는 클래스가 다른 클래스 이름의 하위 문자열입니다.

코드 예

이 솔루션을 특정 상황에 적용하려면:

var test = document.getElementById("test");
var 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에서 요소 클래스 존재를 효율적으로 확인하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!