DOM(Document Object Model)은 웹 페이지의 구조와 내용을 표현하는 인터페이스로, HTML이나 XML 문서의 요소들을 객체로 다룰 수 있도록 해주는 프로그래밍 인터페이스다. 즉, 웹 페이지를 구성하는 각 요소들을 JavaScript와 같은 프로그래밍 언어에서 쉽게 접근하고 조작할 수 있게 해준다.
DOM의 핵심 개념
1. 문서 객체 모델
- HTML문서의 구조를 트리 형태로 모델링한다. 트리 구조는 부모-자식 관계로 연결된 계층적 구조다.
- 각 HTML 요소는 DOM에서 객체로 표현된다.
- 각 객체는 속성(attribute), 자식 노드(child node), 이벤트 등을 가질 수 있다.
2. JS와 DOM
- DOM은 JS로 제어할 수 있다. HTML 요소를 선택하고, 수정, 삭제, 이벤트 추가 등의 작업이 가능하다.
- 이를 통해 동적으로 웹 페이지를 변경할 수 있다.
예시
HTML문서
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM Example</title>
</head>
<body>
<h1>Welcome to the DOM</h1>
<p id="paragraph">This is a paragraph.</p>
<button id="changeTextBtn">Change Text</button>
</body>
</html>JS에서 DOM 사용
// DOM에서 id가 'changeTextBtn'인 버튼을 선택
const button = document.getElementById('changeTextBtn');
// 버튼 클릭 시 실행될 함수
button.addEventListener('click', function() {
// DOM에서 id가 'paragraph'인 요소의 텍스트를 변경
const paragraph = document.getElementById('paragraph');
paragraph.textContent = 'The paragraph text has been changed!';
});이 처럼 HTML을 수정하고 CSS을 변경하거나 새로운 요소를 추가하고 삭제할 수도 있다.
DOM 트리 구조 예시
<html>
<head>
<title>Document Title</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a paragraph.</p>
</body>
</html>위 문서를 DOM 트리로 변환하면 다음과 같다.
Document
└── html
├── head
│ └── title ("Document Title")
└── body
├── h1 ("Hello, World!")
└── p ("This is a paragraph.")
DOM과 브라우저
브라우저는 HTML 문서를 파싱하여 DOM을 생성하고 그 DOM을 JS로 제어할 수 있게 한다. 이를 통해 실시간으로 변경 사항을 웹 브라우저가 반영할 수 있다.
'React' 카테고리의 다른 글
| useState란? (0) | 2024.12.19 |
|---|---|
| useEffect란? (0) | 2024.12.19 |
| 화살표 함수 (3) | 2024.12.18 |
| 컴포넌트의 생애 주기 (2) | 2024.12.18 |
| React 기초 : 컴포넌트 (2) | 2024.12.18 |