[JavaScript] classList 파헤치기

1. classList는 어떤 속성일까?

classList는 DOM 요소의 클래스를 다루는 메서드들을 제공하는 속성으로, 이 속성은 DOM 요소의 클래스 목록을 나타내는 DOMTokenList 객체를 반환한다.

주로 클래스를 추가, 제거, 토글하거나 존재 여부를 확인하는데 사용된다.

주요 메서드

add( String )

지정한 클래스 값을 추가한다. 만약 추가하려는 클래스가 엘리먼트의 class 속성에 이미 존재한다면 무시한다.

remove( String )

지정한 클래스 값을 제거한다.

item( Number )

콜렉션의 인덱스를 이용하여 클래스 값을 반환한다.

toggle( String )

인수가 1개일 때 ➡️ 클래스가 이미 존재한다면 제거하고 false를 반환하며, 존재하지 않으면 클래스를 추가하고 true를 반환한다.

2번째 인수가 있다면? ➡️ 두번째 인수(조건)이 true로 평가되면 지정한 클래스 값을 추가하고, false로 평가되면 제거한다.

contains( String )

지정한 클래스 값이 엘리먼트의 class 속성에 존재하는지 아닌지를 확인한다.

replace( oldClass, newClass )

존재하는 클래스를 새로운 클래스로 교체한다.

---

2. 과제하면서 막혔던 부분

(아래는 수정된 코드입니다.)

HTML

JavaScript

오답노트 ✨

처음에는 button class를 사용해서 하면 되겠지? 하고 document.getElementsByClassName('button').classList.toggle("show");로 자동완성도 안되는 걸 꾸역꾸역 적었는데 막상 적어놓고 보니 토글이 안됨.

➡️ 알고보니 토글할 대상을 1개로 특정해야 한다고 해서 각각의 본문의 캡처처럼 id부터 타고 들어가는 걸로 다시 수정함.

➡️ 결론: 일단 자동완성이 안뜬다면 의심을 해보자🥲 그리고 classList는 한번에 하나씩만 바꿀 수 있다는 것을 기억하자!

---

(+) 오늘의 새싹반 후기

1. 설계

   내가 코드 짜다가 몇시간씩 막히는 이유, 내가 배운 것을 실습에 적용하기 힘든 이유는 설계하는 능력이 부족하기 때문일 수 있다는 조언을 강사님께 들었다.

   _정말이지 피가 되고 살이 되는 말씀 그 잡채..._

   원하는대로 구현하기 위해서 어떤 식으로 전개해나가야 하는가? 항상 이 점을 머릿속으로 먼저 생각해보고 코드를 짜자.

2. Chat GPT

   웬만하면 배우는 단계에서는 AI 쓰지말자. 스스로 생각하는 능력을 기르자.

   강사님 말씀을 내가 이해하기론, 직장 들어가서도 쓰지 말라는 이야기는 아니지만 초심자같은 경우에는 Chat GPT가 내준 답안을 자기 것으로 소화할 수 없는 단계이기 때문에 쓰지 않는 걸 권고하시는 것 같다.

   
   
   
   

   참고자료 
   https://developer.mozilla.org/ko/docs/Web/API/Element/classList