classList의 기능
className
class 속성에 대응
대입하면 클래스 문자열 전체가 바뀐다
그럼 클래스 한 개만 관리하고 싶다면? classList 사용
<body class="main page">
<script>
alert(document.body.className); // main page
</script>
</body>classList
이터러블 객체
클래스 하나만 관리하고 싶을 때 사용
읽기 전용 프로퍼티
<body class="main page">
<script>
// 클래스 추가
document.body.classList.add('article');
alert(document.body.className); // main page article
</script>
</body>↓ 하나만 관리하게 해주는 메서드 존재
.add("class-name")- 클래스 추가.remove("class-name")- 클래스 제거.toggle("class-name")- 존재 여부에 따라 추가/제거.contains("class-name")- 특정 클래스 포함 여부 확인
❗️classList.toggle("class-name", boolean)을 사용하면 조건부 토글 가능!
const textElement = document.getElementById("text");
const CLICKED_CLASS = "clicked";
function handleClick() {
const currentClass = animalElement.className;
if (currentClass !== CLICKED_CLASS) {
textElement.className = CLICKED_CLASS;
} else {
textElement.className = "";
}
}
function init() {
textElement.addEventListener("click", handleClick);
}
init();
Hello! My Name is oYJo