classList 프로퍼티를 사용한 클래스 조작 방법들

Last Modified : 2018-02-19 / Created : 2018-02-19

14,948
View Count

주소 복사하기

매우 자주 사용하는 자바스크립트의 DOM 객체의 class를 조작할 수 있는 classList 프로퍼티에 대하여 알아봅니다.

개인적으로 class를 조작하는 방법으로 jQuery를 사용할 수도 있지만 classList 역시 매우 쉽고 간단하게 동일한 기능을 수행할 수 있습니다. DOM 요소에 classList를 사용하여 아래와 같은 메소드를 수행하는 것이 가능합니다.

add() // class 이름을 추가
remove() // class 이름을 삭제
toggle() // class 이름을 toggle하여 삭제 또는 추가

item(index) // 해당 위치의 클래스를 반환

contains() // 포함된 여부를 확인가능

replace(old, new) // 클래스명을 바꾸기

# classList 메소드 예제보기

만약 버튼을 클릭할 경우 해당 요소에 active 클래스명을 toggle 방식 추가 또는 제거하는 예제를 알아보겠습니다. 버튼을 클릭하면 해당 요소에 active 라는 클래스명이 생기고 다시 클릭하면 삭제되는 토글 방식의 이벤트가 발생합니다. 클릭시 스타일이 적용되어 빨간색으로 폰트색이 변경됩니다.

@ toggle.css

button.active {
color: red;
}

@ toggle.html

<button onclick="window.activeElement(event)">Click</button>

@ toggle.js

activeElement = function(event) {
var _thisEle = event.target;
_thisEle.classList.toggle('active');
};

이제 위 코드를 동작하면 어떻게 될까요? 아래에서 직접 클릭해보시기 바랍니다.