자바스크립트 공부하기 - DOM part의 classList

클래스 리스트는 DOM(Document Object Model) 조작과 관련이 있어.

 

자바스크립트 공부하기 - DOM, 메서드

 

---

👉 JavaScript의 큰 목차로 보면 "DOM 조작(Document Manipulation)" 파트에 속해.
👉 더 구체적으로는 "요소 선택 및 조작(Element Selection & Manipulation)" 부분에서 다뤄져!

 

📌 큰 흐름 정리

1. HTML & CSS
2. DOM (문서 객체 모델) 조작
   • 요소 선택 (getElementById, querySelector 등)
   • 요소 속성 조작 (textContent, innerHTML 등)
   • 클래스 조작 (classList) ← 우리가 배운 내용!
   • 스타일 변경 (style 속성)
   • 이벤트 추가 (addEventListener)

*선택하거나 생성해낸 요소에, class 를 입히는 것!

---

1. 클래스 리스트(ClassList)란?

클래스 리스트는 HTML 요소의 클래스(class)를 제어할 수 있는 객체야.
쉽게 말하면, CSS 스타일을 적용하는 클래스(class)를 추가, 제거, 토글(켜고 끄기)할 수 있도록 돕는 기능이야.

 

2. 상위 개념: HTML 요소(Element)와 속성(Attribute)

클래스 리스트는 HTML 요소의 일부야.
HTML 요소는 태그(<div>, <p> 등)로 이루어져 있고, 속성(attribute)을 가질 수 있어.
그중에서도 class 속성은 스타일(CSS)이나 JavaScript 동작을 위해 사용되지.
→ 이 class 속성을 조작하는 것이 **클래스 리스트(classList)**야!

 

 

📌 비유:
HTML 요소를 옷이라고 생각해보자!

• class는 옷의 스타일(색깔, 무늬) 같은 거야.
• classList는 옷을 입고 벗거나 바꾸는 도구야.
  → 예시: "겨울이니까 코트를 입어야지!" → classList.add("coat")
  → 예시: "더우니까 코트 벗어야지!" → classList.remove("coat")

 

3. 하위 개념: 클래스 리스트의 주요 메서드

클래스 리스트에는 여러 기능이 있어. 대표적으로 추가, 제거, 토글, 포함 여부 확인이 가능해!

메서드	설명	예제
add(className)	클래스를 추가	element.classList.add("active")
remove(className)	클래스를 제거	element.classList.remove("hidden")
toggle(className)	있으면 제거, 없으면 추가	element.classList.toggle("dark-mode")
contains(className)	클래스 포함 여부 확인 (true/false)	element.classList.contains("open")

📌 비유:

• add() → 모자를 씌우는 것
• remove() → 모자를 벗기는 것
• toggle() → 모자를 썼다면 벗고, 안 썼다면 쓰는 것
• contains() → 모자를 쓰고 있는지 확인하는 것

---

 

 

공부하다가 궁금해진..

그러면 creatElement 또는 getElementById와의 차이점은 뭐지 ? 

 

 

---

 

📌 getElementById() vs. createElement() vs. classList 차이점!

 

💡 이 세 개는 역할이 완전히 달라!

> get은 요소 가져오기, create는 만들기, classlist는 그 요소에 class 주기 !

 

메서드	역할	관련 개념	예제
getElementById(id)	HTML 요소를 가져옴	요소 선택 (DOM 탐색)	document.getElementById("myDiv")
createElement(tag)	새로운 HTML 요소를 만듦	요소 생성	document.createElement("div")
classList	요소의 클래스를 추가/제거/변경	요소 조작 (CSS 스타일 변경)	element.classList.add("active")

---

🔍 자세한 차이점 비교

🟢 1. getElementById(id) → HTML 요소를 가져오는 기능

👉 이미 HTML에 존재하는 요소를 찾아오는 메서드야.
👉 특정 id 값을 가진 요소를 가져올 때 사용해.
📌 비유: 교실에서 "홍길동" 학생을 찾는 것

 

<div id="myDiv">안녕하세요!</div> // html

let myElement = document.getElementById("myDiv");
console.log(myElement.textContent);  // "안녕하세요!"
//js

➡ 이 요소를 선택하는 것뿐이고, 만들거나 스타일을 바꾸는 건 아님!

 

🔵 2. createElement(tag) → 새로운 요소를 만드는 기능

👉 HTML 문서에 없던 새로운 요소를 JavaScript로 만들어내는 메서드야.
📌 비유: 종이를 꺼내서 새 메모지를 만드는 것

let newDiv = document.createElement("div"); // 새로운 div 생성
newDiv.textContent = "새로운 요소!";
document.body.appendChild(newDiv); // 문서에 추가

➡ 이제야 새로운 요소가 생긴 거야!

 

🟠 3. classList → 요소의 스타일(class) 변경

👉 요소가 이미 존재할 때, CSS 스타일을 바꿀 때 사용하는 기능이야.
📌 비유: 옷(스타일)을 입히거나 벗기는 것

<div id="box" class="red">이건 박스!</div> //html

let box = document.getElementById("box");
box.classList.add("blue");  // 기존 "red" 클래스 + "blue" 추가
box.classList.remove("red"); // "red" 삭제
box.classList.toggle("hidden"); // "hidden"이 없으면 추가, 있으면 제거

---

📌 classList 개념을 더 깊이 이해하기 위한 추가 개념!

classList를 제대로 활용하려면 연관된 몇 가지 개념을 같이 알아두면 좋아!

---

1️⃣ className vs. classList 차이점

👉 classList 말고 className이라는 것도 있는데, 이 둘의 차이를 알아두면 더 유용해!

✅ className (문자열 조작)

• 요소의 모든 클래스를 한꺼번에 변경할 때 사용
• 기존 클래스가 사라질 위험 있음!

let div = document.getElementById("box");
div.className = "blue";  // 기존 클래스가 다 사라지고 "blue"만 남음!

🚨 문제점: 기존 클래스(red, hidden 등)가 다 사라져버릴 수도 있음!

 

---

2️⃣ classList와 CSS의 관계

👉 classList는 CSS를 동적으로 변경하는 데 많이 쓰여!
👉 클래스 기반 애니메이션을 만들 때 유용해!

.hidden {
  display: none;
}

.fade-in {
  opacity: 0;
  transition: opacity 1s ease-in;
}
.fade-in.show {
  opacity: 1;
}

let element = document.getElementById("text");
element.classList.add("show");  // 클래스를 추가하면서 애니메이션 실행!

➡ CSS 애니메이션 효과를 쉽게 제어할 수 있어!

 

---

3️⃣ classList와 이벤트(Event) 연계

👉 classList는 이벤트와 함께 사용할 때 진짜 유용함!
👉 클릭하면 특정 클래스를 추가/삭제하는 식으로 많이 씀

let button = document.getElementById("toggleBtn");
let box = document.getElementById("box");

button.addEventListener("click", () => {
  box.classList.toggle("active");
});

👉 이 코드의 역할:
버튼을 클릭하면 box 요소에 "active" 클래스를 추가하거나 제거(toggle)하는 기능을 한다!

 

이 부분에서, addEventListener와 화살표 함수가 헷갈린다면 아래를 참고하자 !

---

4️⃣ classList로 여러 개의 클래스 한 번에 추가/삭제 가능

👉 여러 개의 클래스를 한 번에 추가하려면 쉼표(,)로 구분해서 넣으면 돼!

let div = document.getElementById("box");
div.classList.add("red", "bold", "shadow");  // 여러 개 추가 가능!
div.classList.remove("red", "shadow");  // 여러 개 삭제 가능!

---

 

 

let button = document.getElementById("toggleBtn");
let box = document.getElementById("box");

button.addEventListener("click", () => {
  box.classList.toggle("active");
});

🎯 이 코드 한 단계씩 논리적으로 설명해줄게!

👉 이 코드의 역할:
버튼을 클릭하면 box 요소에 "active" 클래스를 추가하거나 제거(toggle)하는 기능을 한다!

---

🔹 1️⃣ document.getElementById("toggleBtn")

let button = document.getElementById("toggleBtn");

📌 설명:

• HTML 문서에서 id가 "toggleBtn"인 요소를 가져와서 button 변수에 저장해.
• 즉, HTML에 <button id="toggleBtn">클릭</button> 같은 버튼이 있어야 해.
• 이 버튼을 클릭하면 어떤 동작을 하도록 만들 거야!

---

🔹 2️⃣ document.getElementById("box")

let box = document.getElementById("box");

📌 설명:

• HTML 문서에서 id가 "box"인 요소를 찾아서 box 변수에 저장해.
• 예를 들면 <div id="box">내용</div> 같은 태그를 가져오는 거야.
• 이 box의 클래스를 클릭할 때마다 변경할 거야!

---

🔹 3️⃣ button.addEventListener("click", () => { ... })

button.addEventListener("click", () => {
  box.classList.toggle("active");
});

📌 설명:

1. button.addEventListener("click", 함수)
   • button을 클릭하면 어떤 동작을 실행하게 만들기 위해 이벤트 리스너를 추가해.
   • "click" 이벤트가 발생하면 **화살표 함수(→ 다음 단계에서 설명!)**가 실행됨.

---

🔹 4️⃣ 화살표 함수 () => { ... }

() => {
  box.classList.toggle("active");
}

📌 설명:

• ()=>{}는 **화살표 함수(Arrow Function)**라고 불러.
• 기존의 일반 function()과 같은 역할이지만 더 간단하게 표현할 수 있어!

📌 일반 함수 vs. 화살표 함수 비교

// 일반 함수 사용
button.addEventListener("click", function() {
  box.classList.toggle("active");
});

// 화살표 함수 사용 (더 간결함)
button.addEventListener("click", () => {
  box.classList.toggle("active");
});

✔ 차이점:

• function()을 쓰면 더 길게 코드 작성해야 하지만,
• ()=>{}는 짧고 간단하게 표현 가능해서 더 많이 사용돼!

---

🔹 5️⃣ box.classList.toggle("active")

box.classList.toggle("active");

📌 설명:

• toggle("active")는 "active" 클래스가 있으면 제거하고, 없으면 추가하는 역할을 해!
• 클릭할 때마다 box의 "active" 클래스가 왔다 갔다 하는 거야!

✔ 한 번 클릭 → 추가됨:

<div id="box" class="active">내용</div>

✔ 다시 클릭 → 제거됨:

<div id="box">내용</div>