LEVEL 9 QUEST

DOM 조작 - 웹페이지 동적으로 바꾸기

DOM 조작 - 웹페이지 동적으로 바꾸기 — DevFoil 바이브코딩 Stage 3, Lv.9

DOM이란 무엇인가?

Document Object Model

DOM은 브라우저가 HTML 문서를 읽고 만든 트리 구조의 객체 모델입니다.

HTML 파일의 모든 태그는 DOM 안에서 노드(Node)가 됩니다. JavaScript는 이 DOM을 통해 웹페이지의 내용, 스타일, 구조를 실시간으로 변경할 수 있습니다.

쉽게 말해, DOM은 JavaScript가 HTML을 조작할 수 있게 해주는 다리입니다.

<!-- 이 HTML이 있으면 -->
<div id="app">
    <h1 class="title">안녕하세요</h1>
    <p class="desc">DOM을 배워봅시다</p>
</div>

<!-- 브라우저가 이런 트리로 변환합니다 -->
document
 └── html
      ├── head
      └── body
           └── div#app
                ├── h1.title → "안녕하세요"
                └── p.desc  → "DOM을 배워봅시다"

요소 선택하기 — DOM의 첫 단계

querySelector vs getElementById

DOM을 조작하려면 먼저 원하는 요소를 선택해야 합니다. 가장 많이 쓰는 2가지 방법을 알아봅시다.

// 1. querySelector — CSS 선택자로 찾기 (가장 많이 사용!)
const title = document.querySelector("h1");          // 첫 번째 h1
const app = document.querySelector("#app");           // id="app"
const desc = document.querySelector(".desc");         // class="desc"
const firstLink = document.querySelector("nav a");   // nav 안의 첫 a 태그

// 2. querySelectorAll — 여러 개 선택 (NodeList 반환)
const allButtons = document.querySelectorAll("button");
const allCards = document.querySelectorAll(".card");

// NodeList는 forEach로 순회 가능
allButtons.forEach(btn => {
    console.log(btn.textContent);
});

// 3. getElementById — id로 찾기 (빠르지만 id만 가능)
const header = document.getElementById("header");

// 4. getElementsByClassName — 클래스로 찾기 (HTMLCollection 반환)
const items = document.getElementsByClassName("item");

💡 실전에서는 querySelector를 쓰세요

querySelector는 CSS 선택자 문법을 그대로 사용하므로 CSS를 알면 바로 쓸 수 있습니다. AI가 생성하는 코드에서도 가장 많이 등장합니다.

🔒

여기까지는 미리보기입니다

DOM 조작 - 웹페이지 동적으로 바꾸기
무료 가입하면 이어서 볼 수 있고, 강의를 완료할 때마다 XP와 레벨이 쌓입니다.

Google로 3초 만에 시작 →🧵 Threads로 시작 무료 공개 강의 둘러보기 (Lv.1~3)