
507
15.3 문서 스크립트
티에 대응합니다.
className
프로퍼티를 통해 요소의
class
속성을 문자열 형태로
읽고 쓸 수 있습니다. 하지만
class
속성이라는 이름은 적합하지 않습니다. 이 값은
단일 CSS 클래스가 아니라 클래스 리스트이며, 클라이언트 사이드 자바스크립트
프로그래밍에서는 리스트를 문자열로 취급하지 않고 개별 클래스 이름을 추가하거
나 제거할 때가 많습니다.
이 문제를 해결하기 위해 Element 객체에는
class
속성을 리스트로 취급하는
classList
프로퍼티가 있습니다.
classList
프로퍼티의 값은 이터러블인 배열 비슷
한 객체입니다. 프로퍼티 이름이
classList
이긴 하지만 이 프로퍼티는 클래스 세트
에 더 가깝게 동작하며,
add()
,
remove()
,
contains()
,
toggle()
메서드가 있습니다.
//
모래시계를
써서
사용자에게
현재
작업
중임을
알립니다
.
//
이를
위해
hidden
클래스를
제거하고
animated
클래스를
추가합니다
.
let spinner
=
document.querySelector("#spinner");
spinner.classList.remove("hidden");
spinner.classList.add("animated");