웹 개발을 하다 보면 DOM이라는 단어를 자주 듣게 됩니다.
HTML을 작성할 때도, JavaScript로 버튼을 눌렀을 때 무언가를 바꿀 때도 사실 우리는 DOM을 다루고 있습니다.
이 글에서는 DOM이 무엇인지, 왜 필요한지, 그리고 어떻게 동작하는지 쉽고 명확하게 정리합니다.
✅ DOM이란?
DOM (Document Object Model)은 웹 페이지를 트리 형태로 구조화한 객체 모델입니다.
간단히 말해서:
- HTML 문서를 브라우저가 이해할 수 있는 객체(오브젝트) 구조로 만든 것입니다.
- JavaScript로 쉽게 조작할 수 있게 해줍니다.
📄 HTML → DOM 변환 예시
HTML 문서가 있으면:
<html>
<body>
<h1>Hello</h1>
<p>Welcome to my website.</p>
</body>
</html>브라우저는 이걸 내부적으로 다음처럼 구조화합니다:
Document
└── html
└── body
├── h1
│ └── "Hello"
└── p
└── "Welcome to my website."✨ 이 구조가 바로 DOM 트리입니다.
🔧 DOM 조작 예시
JavaScript를 통해 DOM을 조작할 수 있습니다.
document.querySelector('h1').textContent = 'Hi there!';h1요소를 선택하고- 그 안의 텍스트를
"Hi there!"로 변경하는 코드입니다.
➡️ 사용자가 보는 화면이 즉시 업데이트 됩니다.
🧠 DOM을 왜 써야 할까?
| 이유 | 설명 |
|---|---|
| 브라우저와 소통 | 브라우저가 화면에 표시하는 모든 것은 DOM을 통해 제어됨 |
| 인터랙티브 웹 구현 | 버튼 클릭, 데이터 입력 등 사용자 액션에 반응하려면 DOM을 조작해야 함 |
| UI 변경 | DOM 조작으로 화면 내용을 동적으로 수정 가능 |
⚙️ DOM 관련 주요 용어
| 용어 | 설명 |
|---|---|
| Document | 현재 웹 페이지 전체를 대표하는 객체 |
| Element | HTML 요소 (div, p, h1 등) 하나하나 |
| Node | DOM 트리의 모든 점 (텍스트, 태그, 속성 등 포함) |
| Parent/Child | DOM은 부모-자식 관계로 연결된 트리 구조 |
📦 DOM과 현대 프레임워크
React, Vue, LWC 같은 현대적인 프론트엔드 프레임워크들은 DOM을 더 효율적으로 다루기 위해 등장했습니다.
- Virtual DOM: 실제 DOM에 바로 적용하지 않고 메모리상 가상 DOM에서 먼저 비교하고 최적화하여 적용
- Shadow DOM: 컴포넌트 단위로 독립된 DOM 영역을 생성해서 외부로부터 격리
➡️ 결국, 모두 DOM 조작을 효율적으로 하려는 것입니다.
✨ 요약
| 항목 | 설명 |
|---|---|
| DOM이란? | HTML을 브라우저가 이해하고 조작할 수 있게 만든 트리 구조 |
| 왜 필요? | 웹 페이지를 동적으로 수정하거나 사용자 입력에 반응하기 위해 |
| 어떻게 쓰나? | JavaScript로 요소를 선택하고 수정 |
| 현대 프레임워크와의 관계 | DOM을 더 빠르고 효율적으로 다루기 위한 기술 (Virtual DOM, Shadow DOM 등) |
#태그
#DOM #웹개발 #프론트엔드 #JavaScript #HTML #LWC
