[자바스크립트] classList 속성

`classList`는 DOM 요소의 클래스를 다루기 위한 속성

 

 

이 속성은 해당 요소에 할당된 클래스 목록을 나타내며, 클래스를 추가,제거하고, 특정 클래스의 존재 여부를 확인하는 등의  작업을함 

 

`classList` 속성은 다음과 같은 메서드가 있다.

1. `add(class1, class2, ...)`: 하나 이상의 클래스를 요소에 추가
2. `remove(class1, class2, ...)`: 하나 이상의 클래스를 요소에서 제거
3. `toggle(class, force)`: 특정 클래스를 요소에 추가하거나 제거,

 

toggle 의경우,   만약 `force` 매개변수가 `true`이면 클래스를 강제로 추가하고,

`false`이면 강제로 제거     그렇지 않으면 클래스의 존재 여부를 토글

 

4. `contains(class)`: 특정 클래스가 요소에 포함되어 있는지 여부를 확인.

 

 

 

 

 

 

 

예를 들어, `element.classList.add('example')`는 `element` 요소에 'example' 클래스를 추가 

 

`element.classList.remove('example')`는 'example' 클래스를 제거.

 

`element.classList.contains('example')`는 'example' 클래스가 요소에 포함되어 있는지 여부를 확인

코드에서 `newLi.classList.toggle('complete')`는 `newLi` 요소의 클래스 목록에서 'complete' 클래스를 토글하는 역할