C
JavaScript 목록
이전13 / 21다음
JavaScript/DOM/Lesson 13

DOM — *HTML 을 JS 로 다루기*

30분·theory
이 챕터
1/2

DOM — *HTML 을 JS 로 다루기*

🎯 이 lesson 을 읽고 나면

이 lesson 을 다 읽고 나면 아래 3가지를 자신 있게 할 수 있습니다.

  • ▸✅ var · let · const 차이 + hoisting 동작
  • ▸✅ 타입 7가지 + typeof 의 함정 (typeof null === 'object')
  • ▸✅ 스크립트 로딩 (defer · async · module) 차이

학습 목표를 체크리스트로 두고 다 답할 수 있게 되면 lesson 을 닫으세요.

DOM 이 뭐냐

핵심 한 줄

DOM (Document Object Model) = 브라우저가 HTML 을 JavaScript 객체 트리 로 표현한 것. 이 트리를 조작 해서 페이지를 동적으로 바꿉니다.

트리 구조

code
document
└── html
    ├── head
    │   ├── title
    │   └── meta
    └── body
        ├── h1
        ├── div
        │   ├── p
        │   └── button
        └── footer

각 태그가 노드 (Node). JS 에서 이 노드들을 선택·수정·추가·제거 가능.

요소 선택

javascript
// 1️⃣ ID 로 — 가장 빠름, 항상 1개 (없으면 null)
const el = document.getElementById('main');
//                  ↑ # 안 붙임! 그냥 'main'

// 2️⃣ CSS 선택자로 — 첫 매치 1개 (없으면 null)
const btn = document.querySelector('.btn-primary');
//                    ↑ # / . 포함한 CSS 선택자 그대로 사용 가능

// 3️⃣ CSS 선택자로 — 매치되는 "모두" 반환
const items = document.querySelectorAll('.item');
// → NodeList (배열 비슷하지만 진짜 배열 X)
//   → items.forEach 는 OK, items.map 은 ❌ → [...items].map 으로 변환

querySelector 가 가장 유연 — CSS 선택자 그대로 사용 가능.

내용 변경

javascript
const el = document.querySelector('#title');

// 텍스트
el.textContent = "새 제목";

// HTML
el.innerHTML = "<strong>강조</strong>된 제목";

// 속성
el.setAttribute('data-id', '42');
el.id = "new-id";

// 클래스
el.classList.add('active');
el.classList.remove('hidden');
el.classList.toggle('open');

// 스타일 (인라인)
el.style.color = "red";
el.style.fontSize = "20px";

⚠️ innerHTML 의 함정 — 사용자 입력을 그대로 넣으면 XSS 공격 위험:

javascript
el.innerHTML = userInput;        // ❌ XSS 위험
el.textContent = userInput;       // ✅ 안전

요소 추가·제거

javascript
// 만들기
const newDiv = document.createElement('div');
newDiv.textContent = "안녕";
newDiv.classList.add('greeting');

// 추가
parent.appendChild(newDiv);              // 마지막
parent.insertBefore(newDiv, existing);   // 특정 위치
parent.prepend(newDiv);                   // 처음

// 제거
el.remove();                              // 자기 제거
parent.removeChild(child);                // 자식 제거

이벤트 처리

javascript
const btn = document.querySelector('#submit');

btn.addEventListener('click', (event) => {
    event.preventDefault();   // 기본 동작 방지 (form 제출 등)
    console.log("클릭됨!");
});

// 이벤트 객체
btn.addEventListener('click', (e) => {
    console.log(e.target);       // 클릭된 요소
    console.log(e.clientX, e.clientY);   // 마우스 위치
});

폼 처리

javascript
const form = document.querySelector('#login-form');

form.addEventListener('submit', async (e) => {
    e.preventDefault();

    const formData = new FormData(form);
    const email = formData.get('email');
    const password = formData.get('password');

    const res = await fetch('/api/login', {
        method: 'POST',
        body: JSON.stringify({ email, password }),
        headers: { 'Content-Type': 'application/json' }
    });
});

현대 — DOM 직접 조작은 드물다

React·Vue·Svelte 같은 프레임워크가 DOM 조작을 추상화 합니다. 개발자는 상태 (state) 만 바꾸고, 프레임워크가 DOM 을 알아서 업데이트.

그래도 DOM API 를 알아야 하는 이유:

  • ▸라이브러리 만들기·간단한 페이지
  • ▸디버깅 (브라우저 개발자 도구)
  • ▸프레임워크 내부 이해

한 번 정리

  • ▸DOM = HTML 의 JS 객체 표현
  • ▸querySelector 로 요소 선택
  • ▸textContent·classList·addEventListener 로 조작
  • ▸모던 개발은 React 등이 추상화 하지만 기본기는 필요

⚡ 직접 해보기 — DOM API (mock document)

브라우저 sandbox 제약으로 실제 document 대신 *mock 객체* 로 DOM 조작 흐름 시연. querySelector·textContent·classList 가 어떻게 동작하는지 console 출력으로 확인.
✏️ JS 코드
📟 콘솔 출력
▶ 실행 버튼을 눌러보세요
⚠️ 브라우저 샌드박스에서 실행 — console.log()만 지원, alert/fetch 불가

🤖 AI 에게 이렇게 요청해보세요

이 lesson 의 개념을 알면 AI 에게 구체적으로 지시할 수 있습니다. 막연한 "고쳐줘" 가 아니라 어휘를 가진 요청 — 그게 토큰 절약의 출발점입니다.

  • ▸"이 querySelector 반복을 NodeList 로 받고 forEach 로 묶어줘"
  • ▸"이 이벤트 핸들러를 이벤트 위임 (event delegation) 으로 바꿔줘"
  • ▸"이 코드의 메모리 누수 (이벤트 리스너 해제) 가능성 점검해줘"

왜 이게 토큰을 줄이나

개념을 모를 땐 AI 답변을 받고도 "그게 뭐예요?" 를 다시 물어야 합니다. 그 "다시 물음" 이 토큰을 잡아먹습니다. 개념 한 번 익혀두면 대화가 한 번에 끝납니다.

먼저 읽으면 좋은 개념: 배열 고차 함수
다음 추천: 이벤트 처리
이전목록다음
DOM이란? - JavaScript