DOM (Document Object Model)
문서 객체 모델은 HTML, XML 문서(웹 페이지)의 프로그램의 interface이다.
문서의 구조화된 표현 (structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다.
즉, 스크립팅 언어가 쉽게 웹 페이지에 접근하여 조작할 수 있게끔 연결시켜주는 역할을 담당
JavaScript는 브라우저가 읽고 어떤 작업을 할 수 있는 언어,
DOM은 이 작업이 이루어지는 장소라고 볼 수 있다.
DOM과 CSSOM 모델을 거쳐 Render Tree가 생성된다.
Render Tree는 웹 페이지에 표시될 HTML 요소들과 이와 관련된 스타일 요소들로 구성된다.
- DOM(Document Object Model): HTML 요소들의 구조화된 표현
- CSSOM(Cascading Style Sheets Objects Model): 요소들과 연관된 스타일 정보의 구조화된 표현
DOM은 어떻게 생성될까
DOM은 단순 텍스트로 구성된 HTML 문서의 내용과 구조가 객체 모델로 변환되어 다양한 프로그램에서 사용될 수 있다. DOM의 객체 구조는 노드 트리로 표현된다. 하나의 부모 줄기가 여러 개의 자식을 갖고 있고, 또 가지는 잎을 가질 수 있는 나무와 같은 구조로 이루어져있다.
이 예시의 경우, 루트 요소인 <html>은 '부모 줄기'이고 내포된 태그들은 '나뭇가지', 그리고 안의 컨텐츠는 '잎'에 해당한다.
<!doctype html>
<html lang="en">
<head>
<title> My first web page</title>
</head>
<body>
<h1>Hello, world!</h>
<p>How are you?</p>
</body>
</html>이 예시는 아래와 같은 노드 트리로 표현된다.
DOM을 사용하는 이유
1. 자바스크립트를 통해 HTML에서 데이터를 가져오고 싶을 때
2. 웹 페이지 데이터를 동적으로 변경하고 싶을 때
3. interactive한 Web App을 만들고 싶을 때
요약
- DOM은 HTML 문서에 대한 인터페이스이다. 첫째로 뷰 포트에 무엇을 렌더링 할지 결정하기 위해 사용되며, 둘째로는 페이지의 콘텐츠 및 구조, 그리고 스타일이 자바스크립트 프로그램에 의해 수정되기 위해 사용된다.
'Front-end > JavaScript' 카테고리의 다른 글
| [JavaScript] var, let, const의 차이점 (0) | 2023.06.28 |
|---|---|
| const도 수정할 수 있다? (0) | 2023.06.23 |
| [JavaScript] 객체 Object (0) | 2023.06.23 |
| [JavaScript] 물음표'?' / 삼항 연산자 / 조건부 연산자 (1) | 2023.06.09 |
| JavaScript의 기초 (0) | 2023.06.09 |
