브라우저의 렌더링 엔진은 HTML 문서를 파싱하여 브라우저가 이해할 수 있는 자료구조인 DOM을 생성한다. 지금부터 DOM이란 무엇인지에 대해 알아보자.
DOM(Document Object Model)
DOM은 웹 페이지를 스크립트나 프로그래밍 언어와 연결하는 문서의 프로그래밍 인터페이스이다.
또는 HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공하는 트리 자료구조를 말한다.
HTML, SVG, XML 문서의 구조를 메모리에 표현하며, 이를 통해 문서를 논리적인 트리 구조로 모델링한다.
일반적으로 JavaScript를 통해 DOM을 조작하는 경우가 많지만, DOM 자체는 JavaScript의 핵심 언어가 아닌 독립적인 기술이다.
DOM 트리는 문서의 각 요소를 노드(Node)로 표현하며, 이를 조작할 수 있는 다양한 메서드와 속성을 제공한다.
이를 통해 문서의 구조, 스타일, 내용을 동적으로 변경할 수 있다.
DOM 트리의 핵심 개념
1. 트리 구조
DOM은 문서를 논리적인 트리 형태로 나타낸다.
트리의 각 분기는 노드로 끝나며, 노드는 객체를 포함한다.
HTML 문서
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<h1>Hello, DOM!</h1>
<p>This is a paragraph.</p>
</body>
</html>DOM 트리
Document
└── <html>
├── <head>
│ └── <title>Example</title>
└── <body>
├── <h1>Hello, DOM!</h1>
└── <p>This is a paragraph.</p>노드(Node)
DOM 트리는 다양한 종류의 노드로 구성된다.
- 요소 노드 (Element Node): HTML 태그를 나타냄
- 텍스트 노드 (Text Node): 태그 내부의 텍스트를 나타냄
- 속성 노드 (Attribute Node): 요소의 속성을 나타냄
ex.
<div id="example" class="test">Hello!</div>- 요소 노드:
<div> - 텍스트 노드:
Hello! - 속성 노드:
id="example",class="test"
이벤트와 DOM
DOM은 단순히 문서를 표현하는데 그치지 않고, 노드에 이벤트 핸들러를 연결할 수 있다.
예를 들어, 사용자가 버튼을 클릭했을 때 특정 동작을 수행하도록 설정할 수 있다.
버튼 클릭 시 alert 출력
const button = document.getElementById('myButton');
button.addEventListener('click', () => {
alert('Button clicked!');
});DOM 인터페이스
DOM은 다양한 인터페이스를 제공하며, 이를 통해 문서를 조작하거나 정보를 가져올 수 있다.
주요 DOM 인터페이스
- Document: 문서 전체를 나타내며, DOM 트리의 최상위 객체
- Element: 개별 HTML 또는 XML 요소를 나타냄
- Node: DOM 트리의 모든 노드의 기본 인터페이스
- EventTarget: 이벤트를 연결하거나 제거하는 메서드를 제공
- DOMTokenList: 클래스와 같은 토큰 목록을 조작
HTML DOM API
HTML 문서를 다루기 위해 DOM에 추가된 기능으로, HTML 요소를 더 쉽게 조작할 수 있도록 인터페이스를 확장한다.
- HTMLElement: 모든 HTML 요소의 기본 클래스
- HTMLCollection: 여러 HTML 요소를 관리하는 객체
- History: 브라우저의 기록을 관리
SVG DOM
SVG 문서는 DOM에서 HTML과 유사한 방식으로 모델링되지만, SVG에 특화된 추가 기능을 가진다.
- SVGElement: SVG 요소를 나타내는 기본 클래스
- SVG-specific 속성과 메서드: SVG 문서를 조작하기 위한 고유 기능
DOM의 중요성
DOM은 웹페이지를 동적으로 조작할 수 있는 핵심 도구로, 다음과 같은 작업에 사용된다.
- 요소의 추가 및 제거: DOM 메서드를 통해 새로운 요소를 생성하거나 삭제 가능
- 스타일 변경: JavaScript로 CSS 스타일을 동적으로 수정
- 이벤트 처리: 사용자 상호작용(클릭, 입력 등)을 감지하고 처리
- 데이터 렌더링: 서버에서 가져온 데이터를 화면에 표시
