29. 자바스크립트로 HTML class를 추가/삭제하기

안녕하세요. 박기린 입니다.
이전에 DOM을 이용하여 HTML Elements를 조작하는 방법에 대해 알아보았습니다. (해당 글 : https://arnopark.tistory.com/506)
그 중에서 class attribute를 수정하는 방법에 대해 알아보겠습니다.

HTML의 class를 추가/제거

<div class="modal hidden">
 <...>
</div>

위와 같은 HTML div 태그가 있다고 봅시다. div에는 'modal'과 'hidden'이라는 두 개의 클래스가 있습니다. class가 여러 개로 이루어져 list를 형성할 경우에는 classList property와 메소드를 이용해서 list 안의 class를 추가하거나 제거할 수 있습니다.

const modal = document.querySelector('.modal');

const openModal = function() {
    modal.classList.remove('hidden');
}

const closeModal = function() {
    modal.classList.add('hidden');
}

1. 우선 querySelector()와 같은 DOMSelector로 편집하고자 하는 class의 HTML Elements(DOM)을 지정해줍니다.
2. DOM 요소가 가지는 'classList' property에 접근합니다.
3. classList의 'remove()', 'add()' 메소드를 이용해서 class를 추가하거나 제거합니다.
remove(), add()는 String 타입으로 class 명을 입력받습니다.

---

toggle() 메소드

const toggleModal = function() {
    modal.classList.toggle('hidden');
}

remove, add 대신에 사용하기 좋은 메소드로 'toggle()'이 있습니다.
String 인수로 받은 class가 DOM(HTML)의 class 안에 이미 존재하는 경우 remove(), 반대의 경우 add()를 해줍니다.
스위치를 껐다켰다 하는 느낌으로 사용할 수 있는 메소드 입니다.