JavaScript를 사용하여 HTML 요소에 클래스가 있는지 확인하는 방법은 무엇입니까?

JavaScript로 요소 클래스 존재 확인

JavaScript에서 HTML 요소가 특정 클래스를 보유하는지 확인하는 것은 최신 브라우저를 사용하여 쉽게 수행할 수 있습니다. 고유한 classList 객체입니다. classList .contains() 메소드를 사용하면 요소에 클래스가 있는지 확인할 수 있습니다. 구문은 다음과 같습니다.

element.classList.contains(class);

이 접근 방식은 모든 현재 브라우저에서 지원되며 폴리필은 이전 브라우저에서 사용할 수 있습니다.

레거시 브라우저를 위한 대체 접근 방식

이전 브라우저와의 호환성이 중요하고 폴리필을 피하려는 경우 indexOf()를 활용하는 대체 방법을 사용할 수 있습니다.

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

이 최적화된 접근 방식을 사용하면 정확한 클래스 일치만 검색됩니다. 부분 클래스 일치로 인한 거짓 긍정 방지

제공된 예제에 솔루션 적용

제공된 예제에서 switch 문은 classList 및 indexOf 메서드와 함께 사용할 수 없습니다. . 그러나 다음 코드를 사용하면 동일한 결과를 얻을 수 있습니다.

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;
    }
}

이 수정된 코드는 더 간결해지고 중복 검사를 제거하는 동시에 HTML 요소에 클래스 존재를 정확하게 식별합니다.

위 내용은 JavaScript를 사용하여 HTML 요소에 클래스가 있는지 확인하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!