JavaScript 기초 - DOM 조작

CHAPTER 01

요소 선택하기

HTML 요소를 찾는 첫 번째 단계! 4가지 방법이 있어요.

4가지 선택 방법

// 1️⃣ ID로 선택 (가장 빠름)

const element = document.getElementById("myId");

// 2️⃣ Class로 선택 (여러 개)

const elements = document.getElementsByClassName("myClass");

// 3️⃣ Tag로 선택 (여러 개)

const elements = document.getElementsByTagName("li");

// 4️⃣ CSS 선택자 (모던 방식!) ⭐

const one = document.querySelector(".myClass");  // 첫 번째만

const all = document.querySelectorAll("li");  // 모두

실습: 아이디로 요소 찾기

ID가 "demo1"인 요소를 찾아보세요:

안녕하세요! 저는 demo1입니다.

const element = document.getElementById("demo1");

element.textContent = "찾았다!";

실습: querySelectorAll로 여러 개 선택

class="item"인 모든 요소를 선택하세요:

항목 1
항목 2
항목 3

const items = document.querySelectorAll(".item");

console.log(items.length);  // 3

items.forEach((item) => {

  item.style.color = "red";

})

⭐ 추천: querySelector를 가장 많이 써요!
CSS 선택자를 사용하기 때문에 가장 유연해요.

CHAPTER 02

요소 생성 & 추가 & 제거

HTML을 JavaScript로 동적으로 만들고 붙이고 지우기!

요소 생성 & 추가

// 1️⃣ 요소 생성

const li = document.createElement("li");

// 2️⃣ 내용 추가

li.textContent = "새로운 항목";

// 3️⃣ 요소에 붙이기

const list = document.getElementById("myList");

list.appendChild(li);

실습: 할 일 추가

function addTask() {

  const input = document.getElementById("taskInput");

  const list = document.getElementById("taskList");

  const li = document.createElement("li");

  li.textContent = input.value;

  list.appendChild(li);

  input.value = "";  // 입력창 비우기

}

요소 제거

// 방법 1: 부모에서 제거

const parent = document.getElementById("list");

const child = document.getElementById("item");

parent.removeChild(child);

// 방법 2: 요소가 자신을 제거 (더 간단!)

element.remove();

실습: 마지막 할 일 삭제

자바스크립트 공부

function deleteLastTask() {

  const list = document.getElementById("deleteTaskList");

  const lastItem = list.lastElementChild;

  if (lastItem) {

    lastItem.remove();

  }

}

⚠️ 주의: lastChild는 텍스트 노드를 포함해요.
요소만 선택하려면 lastElementChild를 사용하세요!

CHAPTER 03

텍스트 & HTML 조작

요소 안의 내용을 바꾸는 두 가지 방법

textContent vs innerHTML

// textContent: 텍스트만 (안전함) ✅

element.textContent = "안녕하세요";

// innerHTML: HTML도 포함 (위험할 수 있음)

element.innerHTML = "<strong>안녕하세요</strong>";

실습: 텍스트 바꾸기

원래 텍스트

function changeText() {

  const box = document.getElementById("messageBox");

  box.textContent = "변경된 텍스트!";

}

function changeHTML() {

  const box = document.getElementById("messageBox");

  box.innerHTML = "<strong>굵은 글자</strong>";

}

⭐ 추천: 일반적으로 textContent를 사용하세요!
HTML이 필요한 경우에만 innerHTML을 사용해요.

CHAPTER 04

클래스 조작 (classList)

CSS 클래스를 JavaScript로 추가/제거하기! 가장 유용해요.

classList 4가지 메서드

// 추가

element.classList.add("active");

// 제거

element.classList.remove("active");

// 토글 (있으면 제거, 없으면 추가)

element.classList.toggle("active");

// 포함 여부 확인

if (element.classList.contains("active")) { }

실습: 클래스 토글

버튼을 클릭하세요

function toggleClass() {

  const box = document.getElementById("toggleBox");

  box.classList.toggle("active-demo");

}

CHAPTER 05

스타일 조작

JavaScript로 CSS를 직접 바꾸기!

스타일 수정

// CSS 속성명은 camelCase로

element.style.color = "red";

element.style.fontSize = "20px";

element.style.backgroundColor = "yellow";

element.style.display = "none";

// 읽기

console.log(element.style.color);

실습: 스타일 변경

스타일을 바꿔보세요

function changeColor() {

  const box = document.getElementById("styleBox");

  box.style.color = "red";

}

💡 팁: CSS 속성명이 하이픈(-)이면 camelCase로 바꿔야 해요!
예: background-color → backgroundColor

CHAPTER 06

이벤트 처리

사용자 동작에 반응하기! 클릭, 입력, 마우스 움직임 등등.

이벤트 리스너 추가

// 기본 문법

element.addEventListener("이벤트", function() {

  // 실행될 코드

});

// 화살표 함수

element.addEventListener("click", () => {

  console.log("클릭됨!");

});

자주 쓰는 이벤트

COMMON EVENTS

click	마우스 클릭
input	입력창에 타이핑
change	입력값 변경 (엔터 후)
mouseover	마우스 올릴 때
mouseout	마우스 떠날 때
keydown	키 누를 때

실습: 클릭 이벤트

클릭 횟수: 0

let count = 0;

const btn = document.getElementById("eventBtn");

btn.addEventListener("click", () => {

  count++;

  document.getElementById("eventOutput").textContent = `클릭 횟수: ${count}`;

});

CHAPTER 07

요소 관계 (부모, 자식, 형제)

DOM 트리에서 요소들의 관계를 파악하기!

요소 관계 탐색

// 부모

element.parentElement

// 자식 (직접 자식만)

element.children

element.firstElementChild

element.lastElementChild

// 형제

element.nextElementSibling

element.previousElementSibling

실습: 부모/자식 찾기

부모 요소

자식 1

자식 2

// 자식에서 부모로 가기

const child = document.getElementById("child1");

const parent = child.parentElement;

console.log(parent.id);  // "parent"

// 부모에서 자식들로 가기

const parent = document.getElementById("parent");

const children = parent.children;

console.log(children.length);  // 2

JavaScript DOM 조작