반응형
Element.classList
classList의 다양한 메서드를 통해 클래스를 간편하게 제어할 수 있다.
classList 자체는 읽기 전용 프로퍼티지만 add()와 remove() 메서드를 이용하여 변형할 수 있다.
메서드
먼저 foo 클래스를 가지는 div 상수를 만들고 시작한다.
const div = document.createElement('div');
div.className = 'foo';
console.log(div)
// <div class="foo"></div>
1. remove()
지정한 클래스 값을 제거한다.
존재하지 않는 클래스를 제거해도 에러를 발생시키지 않는다.
div.classList.remove("foo");
// <div class=""></div>
2. add()
지정한 클래스 값을 추가한다.
추가하려는 클래스가 이미 존재한다면 무시한다.
div.classList.add("anotherclass");
// <div class="anotherclass"></div>
여러 클래스 처리
div.classList.add("foo", "bar", "baz");
// <div class="anotherclass foo bar baz"></div>
div.classList.remove("foo", "bar", "baz");
// <div class="anotherclass"></div>
3. item(index)
인덱스를 이용하여 클래스 값을 반환한다.
console.log(div.classList.item(0)) // anotherclass
4. toggle()
- 인수가 하나일 때
클래스가 존재한다면 제거하고 false를 반환, 존재하지 않으면 클래스를 추가하고 true를 반환한다.
div.classList.toggle("visible"); // <div class="anotherclass visible"></div>
- 인수가 두 개일 때
두 번째 인수가 true면 클래스 값을 추가하고 false면 제거한다. 생각보다 유용하게 사용된다.
div.classList.toggle("visible", i < 10 );
5. contains()
지정한 클래스 값이 엘리먼트의 class속성에 존재하는지 확인하여 참, 거짓을 반환한다.
// <div class="anotherclass visible"></div>
console.log(div.classList.contains("foo")); // false
console.log(div.classList.contains("visible")); // true
6. replace(old, new)
기존의 클래스를 새로운 클래스로 교체한다.
// <div class="anotherclass visible"></div>
div.classList.replace("visible", "hidden");
// <div class="anotherclass hidden"></div>
참조
반응형