Cryun's WIKI

Document Object Model

3 min read

Overview

DOM은 HTML 문서를 트리 구조로 표현한 프로그래밍 인터페이스다. 브라우저가 HTML을 파싱하면 DOM 트리를 생성하고, JavaScript로 이를 조작하여 페이지를 동적으로 변경할 수 있다.

개념설명
HTML텍스트로 된 원본 소스
DOM브라우저가 HTML을 해석해서 만든 객체 트리
JavaScriptDOM을 읽고 수정하는 언어

구조

HTML이 파싱되면 각 요소가 **노드(Node)**로 변환되어 트리를 구성한다.

<html>
  <body>
    <h1>제목</h1>
    <p>내용</p>
  </body>
</html>
Document
└── html
    └── body
        ├── h1  ("제목")
        └── p   ("내용")

노드 타입

타입설명예시
Document트리 최상위 루트document
ElementHTML 태그<div>, <p>, <h1>
Text요소 안의 텍스트"제목", "내용"
Attribute요소의 속성class="title"
Comment주석<!-- 주석 -->

요소 선택

// 단일 선택
document.getElementById('myId');
document.querySelector('.myClass');
 
// 복수 선택
document.querySelectorAll('p');
document.getElementsByClassName('myClass');
document.getElementsByTagName('div');

요소 조작

const el = document.querySelector('h1');
 
// 내용 변경
el.textContent = '새 제목';       // 텍스트만
el.innerHTML = '<em>새 제목</em>'; // HTML 포함
 
// 스타일 변경
el.style.color = 'red';
 
// 클래스 조작
el.classList.add('active');
el.classList.remove('active');
el.classList.toggle('active');
 
// 속성 조작
el.setAttribute('data-id', '123');
el.getAttribute('data-id');
el.removeAttribute('data-id');

요소 생성·삭제

// 생성 후 추가
const newEl = document.createElement('p');
newEl.textContent = '새 문단';
document.body.appendChild(newEl);
 
// 특정 위치에 삽입
parent.insertBefore(newEl, referenceEl);
 
// 삭제
el.remove();
parent.removeChild(el);

이벤트

// 이벤트 등록
el.addEventListener('click', (e) => {
  console.log('클릭!', e.target);
});
 
// 이벤트 제거
el.removeEventListener('click', handler);

자주 쓰이는 이벤트 타입:

이벤트설명
click클릭
input입력 값 변경
submit폼 제출
keydown / keyup키보드 입력
DOMContentLoadedDOM 파싱 완료
load리소스 포함 전체 로드 완료

DOM과 렌더링

DOM 조작은 브라우저의 렌더링 파이프라인과 직결된다.

DOM 변경 → Style 계산 → Layout → Paint → Composite
  • DOM을 자주 변경하면 리플로우와 리페인트가 반복되어 성능이 저하된다
  • DocumentFragment를 사용하거나 변경을 한 번에 모아서 처리하면 비용을 줄일 수 있다
  • React, Vue 같은 프레임워크의 Virtual DOM은 이 비용을 최소화하기 위한 추상화 계층이다

그래프 뷰