classList를 사용하면 HTML의 클래스를 보다 쉽게 관리할 수 있습니다.
Element.classList - Web API | MDN
**Element.classList**는 엘리먼트의 클래스 속성의 컬렉션인 활성 DOMTokenList를 반환하는 읽기 전용 프로퍼티이다.
developer.mozilla.org
아래의 예시 코드와 함께 사용법을 정리해보겠습니다.
<style>
// 배경색과 글자색 설정
.red-bg {
background-color: red;
color: white;
}
// display 보이게 설정
.visible {
display: block;
}
// display 보이지 않게 설정
.invisible {
display: none;
}
</style> <body>
<header><h1 id="main-title">Dive into the DOM!</h1></header>
<section class="red-bg">
<ul>
<li class="list-item">Item1</li>
<li class="list-item">Item2</li>
<li class="list-item">Item3</li>
</ul>
</section>
<button>Toggle Visibility</button>
<input id="input-1" class="input-default" value="Enter text..." />
</body>const button = document.querySelector("button");
button.addEventListener("click", () => { // 버튼 클릭 이벤트 발생 시
if (section.className === "red-bg visible") {
section.className = "red-bg invisible"; // <section> 클래스명 수정
} else {
section.className = "red-bg visible"; // <section> 클래스명 수정
}
});버튼을 누를 때마다 <section> 요소 노드가 사라졌다가 나타나기를 원하는 상황입니다.
버튼을 누르면 <section> 요소 노드의 기존의 클래스명에 visible이 추가되고 또다시 버튼을 누르면 visible은 사라지고 invisible이 추가되어야 하는 것입니다.
때문에 className을 사용하여 클래스명을 수정해주었고 원하는 대로 <section> 요소 노드가 사라졌다 나타나는 것이 가능해졌습니다.
하지만 위의 접근법에는 문제점이 있습니다.
추가할 클래스를 수동으로 관리를 해주어야하며 기존에 어떤 클래스가 있었는지 등을 확인해주어야 합니다.
이럴 경우 classList를 사용하면 보다 효율적으로 클래스 관리가 가능해집니다.
classList의 특수한 메서드
classList에는 특수한 메서드들이 존재합니다.
.classList.contains( 확인하고자 하는 클래스 값 );
.classList.add( 추가하고자 하는 클래스 값 );
.classList.remove( 제거하고자 하는 클래스 값 );
.classList.replace( 기존 클래스 값, 변경하고자 하는 클래스 값 );
.classList.toggle( 토글 할 클래스 값 );
.classList.contains를 사용하면 인자로 받은 값이 클래스의 값으로 존재하는지 확인할 수 있습니다.
.classList.add를 사용하면 인자로 받은 값을 클래스의 값에 추가할 수 있으며 인자로는 1개 이상의 값을 받을 수 있습니다.
만약 추가하려는 클래스 값이 기존 클래스 값에 존재한다면 무시합니다.
.classList.remove를 사용하면 인자로 받은 값을 클래스에서 제거할 수 있으며 인자로는 1개 이상의 값을 받을 수 있습니다.
.classList.replace를 사용하면 기존의 클래스 값을 변경할 수 있으며 첫 번째 인자로 기존의 클래스 값을 받으며
두 번째 인자로 변경하고자 하는 클래스 값을 받습니다.
.classList.toggle를 사용하면 클래스를 토글 할 수 있습니다.
클래스를 토글한다는 것은 HTML 요소에 할당된 클래스 값이 없는 경우 클래스 이름을 동적으로 설정하거나
이미 있는 경우 동적으로 제거할 수 있음을 의미합니다.
즉 인자로 받은 값이 없다면 클래스 값에 추가가 되고, 있다면 제거가 되는 것입니다.
다시 예제 코드로 돌아가 보겠습니다.
버튼을 누를 때마다 display가 보이지 않게 해주어야 합니다. 즉 <section> 요소 노드의 클래스 값에 invisible이 추가되었다 제거되었다 해야 되는 상황입니다.
이럴 경우 위의 .classList.toggle를 사용하면 효과적으로 클래스 값을 추가하거나 제거할 수 있습니다.
const button = document.querySelector("button");
button.addEventListener("click", () => {
section.classList.toggle("invisible");
});버튼 클릭 이벤트가 발생할 때마다 <section> 요소 노드의 클래스를 토글을 하게 됩니다.
즉 버튼을 클릭했을 때 기존의 클래스 값에 invisible이 없기 때문에 추가가 되며 버튼을 한 번 더 클릭하면 invisible이 있기 때문에 제거가 됩니다.
.classList.toggle을 사용하니 앞서 작성한 JavaScript 코드보다 간결하고 동적으로 클래스 값을 변경할 수 있게 되었습니다.
'JavaScript' 카테고리의 다른 글
| 요소 제거하기 (0) | 2022.08.28 |
|---|---|
| 요소 생성과 요소 삽입 (0) | 2022.08.28 |
| DOM 트래버싱(Traversing the DOM) (0) | 2022.08.25 |
| 속성(Attribute)과 프로퍼티(Propertie) (0) | 2022.08.24 |
| 노드 쿼리 메서드 (0) | 2022.08.24 |
