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

요소의 클래스 속성을 검사할 때 특정 클래스가 포함되어 있는지 확인해야 하는 경우가 많습니다. 제공된 코드는 스위치 문을 활용하여 요소의 정확한 클래스 값을 검사하지만 이 접근 방식은 부분 일치를 감지하지 못합니다.

이 제한 사항을 해결하려면 element.classList .contains 메서드 사용을 고려하세요. 이 메소드는 클래스 이름을 매개변수로 받아들이고 요소의 클래스 목록 내 존재를 나타내는 부울 값을 반환합니다.

element.classList.contains(class);

이 메소드는 현대 전역에서 보편적으로 지원됩니다. 클래스 포함을 확인하는 일관된 방법을 제공합니다.

또는 .contains 메소드가 없는 이전 브라우저와의 호환성을 위해 다음을 사용할 수 있습니다. indexOf 메소드의 수정된 버전은 다음과 같습니다.

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

이 수정을 통해 찾고 있는 클래스가 더 큰 클래스 이름의 일부일 때 잘못된 긍정을 방지하여 부분 일치를 정확하게 감지할 수 있습니다.

제공된 예제에 이 메서드 적용:

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

test.innerHTML = "";

for(var i = 0, j = classes.length; i 
 .contains 메소드 또는 수정된 indexOf 함수를 사용하면 브라우저 호환성이나 부분 일치 여부에 관계없이 요소에 JavaScript의 특정 클래스가 포함되어 있는지 여부를 안정적으로 확인할 수 있습니다.