Element.classList.contains() 사용법

classList.contains()는
DOM 요소에 지정한 클래스 값이 있는지 체크합니다.
해당 요소에 지정한 클래스 값이 있으면 true를 반환하고, 없으면 false를 반환합니다.

classList.contains()로 여러 개의 클래스 값을 한 번에 체크할 수 없습니다.

일러두기
엄밀히 말하자면, class 속성의 값을 제거하는 것이 아니라 class 속성의 값인 '클래스 이름 목록에서 클래스 이름이 포함되어 있는지 체크한다'라고해야 합니다. class 속성은 해당 요소에 하나 이상의 클래스 이름을 지정하는 속성으로, class 속성에는 띄어쓰기로 여러 개의 클래스 이름을 가질 수 있는 클래스 이름 목록을 값으로 가집니다. classList.contains()는 해당 요소의 클래스 속성의 값인 '클래스 이름 목록에서 클래스 이름이 포함되어 있는지 체크한다'라고 해야 하지만, 관행상 여기에서는 '클래스 값을 체크한다'라고 표기하겠습니다.

HTML class 속성

구문

JavaScript 
element.classList.contains(className)

contains() 함수는 classList 객체의 메서드입니다.

매개변수

classList.contains()의 매개변수
className 필수. 요소에서 체크하려는 클래스 값(문자열 형식)입니다.

반환 값

해당 요소에 지정한 클래스 값이 있으면 true를 반환하고, 없으면 false를 반환합니다.

예제

HTML 
<video src="video.mp4" class="a b c"></video>
JavaScript 
const myVideo = document.querySelector("video");

console.log(myVideo.classList.contains("a")); // true
console.log(myVideo.classList.contains("b")); // true
console.log(myVideo.classList.contains("d")); // false

코드 부연설명
querySelector() 함수는 지정한 CSS 선택자와 일치하는 첫 번째 요소 객체를 반환합니다.

classList.contains()는 요소의 클래스 값을 직접 확인하여 조건을 판단하기 때문에 코드를 간결하고 가독성 있게 작성할 수 있습니다.

주의할 점

요소에 클래스 값을 추가하는 classList.add()와 클래스 값을 제거하는 classList.remove()는 매개변수에 쉼표(,)로 구분해서 여러 개의 클래스 값을 추가하거나 제거할 수 있습니다.

그래서, classList.contains()도 매개변수에 쉼표(,)로 구분해서 여러 개의 클래스 값을 추가하거나 제거할 수 있을 것이라고 생각하지 마세요.

classList.contains()로 여러 개의 클래스 값을 한 번에 체크할 수 없습니다. 매개변수는 단 하나이며 문자열 형식입니다.

브라우저 호환성

classList.contains()의 브라우저 호환성
메서드
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
classList.contains() 8 12 3.6 5.1

명세서

classList.contains()의 명세서 사양
명세서 사양
classList.contains() DOM Standard
#ref-for-dom-domtokenlist-contains①

참고문헌

같이 보기