🚀 JavaScript DOM 조작 빠른 참조

💡 실습 중 빠르게 참고할 수 있는 핵심 코드 모음입니다

1️⃣ DOM 선택 (querySelector)

선택 방법	코드	설명
ID로 선택	querySelector("#id")	하나만 선택
클래스로 선택	querySelector(".class")	첫 번째 하나만
여러 개 선택	querySelectorAll(".class")	모두 선택 (배열)
태그로 선택	querySelector("button")	첫 번째 버튼
속성으로 선택	querySelector('[data-id="1"]')	data 속성으로

2️⃣ 이벤트 듣기 (addEventListener)

이벤트	코드	언제?
클릭	addEventListener("click", () => {})	요소 클릭 시
입력	addEventListener("input", () => {})	타이핑할 때마다
변경	addEventListener("change", () => {})	값 변경 완료 시
키 입력	addEventListener("keypress", () => {})	키보드 입력 시
제출	addEventListener("submit", (e) => {})	폼 제출 시

3️⃣ DOM 바꾸기

작업	코드	예시
텍스트 변경	element.textContent = "텍스트"	div 내용 바꾸기
HTML 변경	element.innerHTML = "<b>굵게</b>"	HTML 포함 가능
입력값 가져오기	input.value	텍스트 필드 값
입력값 설정	input.value = "새 값"	입력창에 텍스트
속성 가져오기	element.getAttribute("data-id")	data 속성 읽기
속성 설정	element.setAttribute("data-id", "5")	속성 값 변경

4️⃣ 클래스 조작 (classList)

메서드	코드	동작
추가	classList.add("active")	클래스 추가
제거	classList.remove("hidden")	클래스 제거
토글	classList.toggle("open")	있으면 제거, 없으면 추가
확인	classList.contains("active")	있는지 확인 (true/false)

5️⃣ 요소 생성/삭제

작업	코드	설명
요소 생성	createElement("div")	새 div 만들기
추가	parent.appendChild(child)	맨 끝에 추가
삭제	element.remove()	요소 제거
자식 전부 삭제	element.innerHTML = ""	내부 비우기

6️⃣ 자주 쓰는 패턴

✅ 버튼 클릭으로 텍스트 바꾸기

const btn = document.querySelector("#btn");
const text = document.querySelector("#text");

btn.addEventListener("click", () => {
  text.textContent = "바뀐 텍스트!";
});

✅ 보이기/숨기기 토글

const box = document.querySelector("#box");
const toggleBtn = document.querySelector("#toggle-btn");

toggleBtn.addEventListener("click", () => {
  box.classList.toggle("hidden");
});

✅ 입력값 가져오기

const input = document.querySelector("#input");
const btn = document.querySelector("#btn");

btn.addEventListener("click", () => {
  const value = input.value;
  console.log(value);
});

✅ 여러 버튼에 이벤트 추가

const buttons = document.querySelectorAll(".color-btn");

buttons.forEach((btn) => {
  btn.addEventListener("click", () => {
    const color = btn.getAttribute("data-color");
    console.log(color);
  });
});

✅ 새 요소 만들어 추가

const container = document.querySelector("#container");
const btn = document.querySelector("#add-btn");

btn.addEventListener("click", () => {
  const newDiv = document.createElement("div");
  newDiv.textContent = "새 박스";
  newDiv.className = "box";
  container.appendChild(newDiv);
});

✅ 삭제 버튼 만들기

const deleteBtn = document.querySelector("#delete-btn");

deleteBtn.addEventListener("click", () => {
  deleteBtn.parentElement.remove();
});

⚠️ 주의사항

• querySelector는 첫 번째 요소만 선택

• 여러 개 선택하려면 querySelectorAll + forEach

• textContent는 텍스트만, innerHTML은 HTML 포함

• 이벤트 리스너는 꼭 선택 후에 추가

• classList.toggle()은 on/off 전환에 편리

Step 1 | Step 2 | Step 3 | 연습문제