# DOM (Document Object Model, 문서 객체 모델)
: HTML 문서의 구조를 객체로 표현한 모델
= 웹 문서를 표현하는 프로그래밍 인터페이스
= 브라우저가 HTML, XML 같은 문서를 파싱한 뒤 생성하는 객체 기반의 구조
Q. DOM 이 필요한 이유?
A. 웹 페이지를 이루는 태그들을 자바스크립트가 이용할 수 있게끔 브라우저가 트리구조로 만든 객체 모델로
이를 통해 프로그래밍 언어(주로 JavaScript)가 문서의 내용, 구조, 스타일을 동적으로 접근하고 조작할 수 있다
- JavaScript와 브라우저 화면(HTML)을 연결하는 역할로 JavaScript는 DOM을 통해 HTML 요소를 조작한다.
// 자바스크립트로 DOM 객체에 접근하여 읽거나 수정하는 예시
// <h1>Welcome</h1> 노드에 접근
const h1 = document.querySelector("h1");
// 텍스트 변경
h1.textContent = "Hello, DOM!";
// 새로운 노드 추가
const newParagraph = document.createElement("p");
newParagraph.textContent = "This is a new paragraph!";
document.body.appendChild(newParagraph);
# DOM 트리
= DOM을 트리 구조로 표현한 것
= HTML 문서의 계층적 구조를 트리 형태로 변환하여 표현한 것
- 각 HTML 요소가 트리의 노드(Node) 형태로 나타난다
HTML 코드 :
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is an example paragraph.</p>
</body>
</html>
DOM 트리 :
Document
├── html
├── head
│ └── title
│ └── "Example"
└── body
├── h1
│ └── "Hello, World!"
└── p
└── "This is an example paragraph."'Javascript' 카테고리의 다른 글
| 렌더링 방식 CSR, SSR (0) | 2025.03.07 |
|---|---|
| [JS] 자료구조, 생성자 함수 (0) | 2025.03.06 |
| JSON (1) | 2025.03.05 |
| 깊은 복사, 얕은 복사 (0) | 2025.03.02 |
| [JS] Babel , Polyfill (0) | 2025.02.16 |