DOM
🌳 DOM이란?
정의
DOM(Document Object Model)은 HTML이나 XML 문서를 객체 트리 구조로 표현한 인터페이스다.
DOM은 문서를 단순한 텍스트가 아니라, 브라우저가 이해하고 조작할 수 있는 객체 구조로 다루게 해준다.
🧩 DOM의 특징
- 문서를 tree 구조로 이해할 수 있다.
- 스크립트로 문서 요소를 제어할 수 있다.
- 페이지 내용, 속성, 구조를 동적으로 변경할 수 있다.
- 브라우저가 HTML을 해석한 결과를 다룬다.
🪵 DOM의 주요 구성
DOM은 여러 노드와 객체로 구성된다.
WindowDocumentElementNode
🧭 DOM에서 자주 보는 관계
정의
DOM은 부모-자식-형제 관계로 연결된 트리 구조를 가진다.
Document는 DOM 트리의 시작점 역할을 한다.Element는 실제 태그 요소를 나타낸다.Node는 DOM을 이루는 기본 단위이다.- 노드 간의 관계를 이용해 요소를 탐색하고 변경할 수 있다.
🛠️ DOM에서 script를 사용하는 방식
브라우저는 JavaScript를 통해 DOM을 직접 조작한다.
- 요소 선택
- 텍스트 변경
- 속성 변경
- 요소 추가 및 삭제
- 이벤트 등록
🔍 자주 쓰는 API
| API | 기능 |
|---|---|
document.getElementById(id) |
id로 요소를 찾는다 |
document.getElementsByTagName(name) |
태그명으로 요소 목록을 찾는다 |
document.querySelector(selector) |
CSS 선택자로 첫 요소를 찾는다 |
document.querySelectorAll(selector) |
CSS 선택자로 여러 요소를 찾는다 |
document.createElement(name) |
새 요소를 만든다 |
parentNode.appendChild(node) |
자식 노드를 추가한다 |
element.innerHTML |
요소의 HTML을 설정한다 |
element.textContent |
요소의 텍스트를 설정한다 |
element.setAttribute(name, value) |
속성 값을 설정한다 |
element.getAttribute(name) |
속성 값을 가져온다 |
element.addEventListener(type, handler) |
이벤트를 등록한다 |
🧪 간단 예시
const title = document.querySelector("h1");
title.textContent = "변경된 제목";
const button = document.createElement("button");
button.textContent = "클릭";
document.body.appendChild(button);
📌 정리
- DOM은 브라우저가 HTML을 객체로 바꾼 결과다.
- JavaScript는 DOM을 통해 화면을 동적으로 바꿀 수 있다.
- DOM 구조를 이해하면 요소 탐색, 이벤트 처리, 화면 변경이 쉬워진다.
댓글남기기