HTML 요소에 특정 클래스가 포함되어 있는지 확인하려면 hasClass() 메서드를 사용할 수 있습니다. 이 함수는 요소의 className 속성에 해당 클래스가 존재하는지 검사하여 불리언 값으로 결과를 반환합니다.
hasClass() 함수의 동작 원리
hasClass() 함수는 요소의 클래스 문자열 앞뒤에 공백을 추가한 후, 찾고자 하는 클래스 이름 역시 공백으로 감싸서 indexOf()로 위치를 확인합니다. 이렇게 하면 클래스 이름의 일부만 일치하는 경우(예: 'my'가 'myClass'와 부분 일치)에도 정확하게 판별할 수 있습니다.
예제 코드
아래 예제는 <div> 요소에 'myClass'라는 클래스가 포함되어 있는지 테스트하는 코드입니다.
<html>
<body>
<div id="test" class="myClass"></div>
<script>
function hasClass(element, cls) {
return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
}
var val1 = document.getElementById('test');
alert(hasClass(val1, 'myClass'));
</script>
</body>
</html>더 간편한 방법: classList.contains()
최신 브라우저에서는 classList API를 활용하는 것이 더 권장됩니다. classList.contains() 메서드를 사용하면 별도의 커스텀 함수 없이도 동일한 결과를 얻을 수 있으며, 코드가 훨씬 간결해집니다.
var element = document.getElementById('test');
alert(element.classList.contains('myClass')); // true 반환classList API는 contains() 외에도 add(), remove(), toggle() 등 클래스를 조작하는 다양한 메서드를 제공하므로, 구형 브라우저(예: IE9 이하)를 지원할 필요가 없다면 classList.contains()를 사용하는 것이 가장 좋은 선택입니다.