문서 객체 모델(DOM)이란?
DOM(Document Object Model)은 웹 페이지에 대한 인터페이스이다. 기본적으로 여러 프로그램들이 페이지의 콘텐츠 및 구조, 그리고 스타일을 읽고 조작할 수 있도록 API를 제공한다. 먼저 DOM을 이해하기 전에 웹 페이지가 어떻게 빌드 되는지 살펴보자.
DOM은 어떻게 생성될까 (그리고 어떻게 보여질까)?
DOM은 원본 HTML 문서의 객체 기반 표현 방식이다. 둘은 서로 비슷하지만, DOM이 갖고 있는 근본적인 차이는 단순 텍스트로 구성된 HTML 문서의 내용과 구조가 객체 모델로 변환되어 다양한 프로그램에서 사용될 수 있다는 점이다.
DOM의 개체 구조는 “노드 트리”로 표현된다. 하나의 부모 줄기가 여러 개의 자식 나뭇가지를 갖고 있고, 또 각각의 나뭇가지는 잎들을 가질 수 있는 나무와 같은 구조로 이루어져 있기 때문이다. 이 케이스의 경우, 루트 요소인 <html> 은 “부모 줄기”, 루트 요소에 내포된 태그들은 “자식 나뭇가지” 그리고 요소 안의 컨텐츠는 “잎”에 해당한다.
아래 HTML 예시에서,
<!DOCTYPE html>
<html lang="en">
<head>
<title>My fist web page</title>
</head>
<body>
<h1>Hello, world!</h1>
<p>How are you?</p>
</body>
</html>이 문서는 아래와 같은 노드 트리로 표현된다.
DOM이 아닌 것
위 예제 혹은 DevTools에서 DOM은 마치 HTML 문서와 1 대 1 매핑이 되는 것처럼 보인다. 그러나 둘 간에는 몇 가지 차이점이 있다.
DOM이 무엇인지 완전히 이해하기 위해, 어떤 것이 DOM이 아닌지 살펴보자.
1. DOM은 HTML이 아니다.
DOM은 HTML 문서로부터 생성되지만 항상 동일하지 않다. DOM이 원본 HTML 소스와 다를 수 있는 두 가지 케이스가 있다.
요약정리
DOM은 HTML 문서에 대한 인터페이스이다. 첫째로 뷰 포트에 무엇을 렌더링 할지 결정하기 위해 사용되며,
둘째로는 페이지의 콘텐츠 및 구조, 그리고 스타일이 자바스크립트 프로그램에 의해 수정되기 위해 사용된다.
DOM은 원본 HTML 문서 형태와 비슷하지만 몇 가지 차이점이 있다.
- 항상 유효한 HTML 형식이다.
- 자바스크립트에 수정될 수 있는 동적 모델이어야 한다.
- 가상 요소를 포함하지 않는다. (Ex. ::after)
- 보이지 않는 요소를 포함한다. (Ex. display: none)
https://wit.nts-corp.com/2019/02/14/5522
'WEB > JavaScript' 카테고리의 다른 글
| [JS] 함수 호이스팅(Hoisting) (0) | 2021.03.23 |
|---|---|
| [JS ES6+] var, let, const 차이점과 용도 (0) | 2021.03.22 |
| [JS] 자바스크립트의 객체 (0) | 2021.03.22 |
| [JS] 자바스크립트 함수란 ? (0) | 2021.03.19 |
| [JS] for in, for of 문? (0) | 2021.03.19 |