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>
참조
'프론트엔드 > JavaScript' 카테고리의 다른 글
[JavaScript] 클린 코드 - 1. 변수명 짓는 방법 (0) | 2021.06.23 |
---|---|
[JavaScript] 배열 메서드 종류 (filter, forEach, map, reduce, sort) (0) | 2021.04.13 |
[JavaScript / ES6] 화살표 함수 (Arrow function) (0) | 2021.04.09 |
[JavaScript] 템플릿 리터럴 (Template literals) (0) | 2021.04.09 |
[JavaScript] 자주 사용하는 DOM API 정리 (0) | 2021.01.21 |