매우 자주 사용하는 자바스크립트의 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');
};

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


! 위 예제코드 직접 동작해보기
위 코드를 실행하면 아래와 같이 나타납니다. 클릭하여 버튼의 색이 빨간색으로 바뀌는지 확인해보세요.