이것은 Ire Aderinokun이 작성하고 bitsofco.de에 게시된 ' What, exactly, is the DOM? '을 번역하고, 수정한 글이다.
여기에서 원본 article 읽기 <What, exactly, is the DOM?>
1. DOM은 무엇일까?
문서 객체 모델 (Document Object Model)
DOM은 웹 페이지에 대한 인터페이스로, 현재 웹페이지의 문서 모델을 의미한다. 웹 문서를 브라우저가 이해할 수 있는 구조로 구성하여 메모리에 적재하게 되는데 이를 DOM이라고 한다.
DOM은 기본적으로 여러 프로그램들이 페이지의 콘텐츠, 구조, 스타일에 접근할 수 있게 하고 수정할 수 있도록 API를 제공한다. 또한 사용자의 동작에 반응할 수도 있게 된다.
DOM의 최상위 객체인 document 객체는 HTML 전체 페이지를 표현한다. 먼저 DOM을 이해하기 전에 웹 페이지가 어떻게 빌드되는지 살펴보겠다.
2. 웹 페이지는 어떻게 빌드되는 것일까?
웹 브라우저가 원본 HTML 문서를 읽어 들인 후, 스타일을 입히고 대화형 페이지로 만들어 viewport(웹페이지가 사용자에게 보이는 영역)에 표시하기까지의 과정을 “Critical Rendering Path” 라고 한다. 쉽게 말해서, 웹 브라우저에 그려지는 과정을 말하는 것이다.
이 과정은 총 6단계로 진행이 되지만, 대략적으로 2단계로 나눌 수 있다.
- 1단계 : 브라우저는 읽어 들인 문서를 파싱하여 최종적으로 어떤 내용을 페이지에 렌더링 할지 결정
- 2단계 : 브라우저는 해당 렌더링을 수행
1단계를 거치면 “렌더 트리”가 생성된다. 렌더 트리는 웹 페이지에 표시될 HTML 요소들과 이와 관련된 스타일 요소들로 구성되고, 브라우저가 렌더 트리를 생성하기 위해서는 다음과 같이 두 모델이 필요하다.
- DOM(Document Object Model) – HTML 요소들의 구조화된 표현
- CSSOM(Cascading Style Sheets Object Model) – 요소들과 연관된 스타일 정보의 구조화된 표현
3. DOM은 어떻게 생성될까? (그리고 어떻게 보일까?)
DOM은 원본 HTML 문서의 객체 기반 표현 방식이다. 둘은 서로 비슷하지만, DOM이 갖고 있는 근본적인 차이는 단순히 텍스트로 구성된 HTML 문서의 내용과 구조가 객체 모델로 변환되어 다양한 프로그램에서 사용될 수 있다는 점이다.
DOM의 개체 구조는 “노드 트리”로 표현됩니다. 하나의 부모가 있고, 줄기가 여러 개인 자식 나뭇가지를 갖고 있고, 또 각각의 나뭇가지는 잎들을 가질 수 있는 나무와 같은 구조로 이루어져 있기 때문이다.
아래의 케이스의 경우, 루트 요소인 <html> 은 “부모 줄기”, 루트 요소에 내포된 태그들은 “자식 나뭇가지” 그리고 요소 안의 콘텐츠는 “잎”에 해당된다.
이 문서는 아래와 같은 노드 트리로 표현된다.
| 노드 | 설명 | 예시 |
| 루트 노드 (root node) | 단 하나의 루트 노드만 존재 | html |
| 요소 노드 (element node) | 모든 HTML 요소는 요소 노드이고, 속성 노드를 가질 수 있는 유일한 노드 | head, body, title, h1, p |
| 텍스트 노드 (text node) | HTML 문서의 모든 텍스트는 텍스트 노드 | DOM, What is DOM?, DOM is an interface to web pages |
4. DOM이 아닌 것!
위 예제 혹은 DevTools에서 DOM은 마치 HTML 문서와 1 대 1 매핑이 되는 것처럼 보인다. 그러나 둘은 몇 가지 차이점이 있다.
DOM이 무엇인지 완전히 이해하기 위해, 어떤 것이 DOM이 아닌지 살펴보자.
1) DOM은 HTML이 아니다.
DOM은 HTML 문서로부터 생성되지만 항상 동일하지 않다. DOM은 원본 HTML 소스와 다를 수 있는 두 가지 케이스가 있다.
첫 번째, 작성된 HTML 문서가 유효하지 않을 때
DOM은 유효한 HTML 문서의 인터페이스이기 때문에 DOM을 생성하는 동안, 브라우저는 유효하지 않은 HTML 코드를 올바르게 교정한다. 아래 예시를 살펴보면,
문서에 유효한 HTML 규칙의 필수 사항인 <head>와 <body> 요소가 빠져있다. 그렇지만 생성된 DOM 트리에는 올바르게 교정되어 나타난다.
두 번째, 자바스크립트에 의해 DOM이 수정될 때
DOM은 HTML 문서의 내용을 볼 수 있는 인터페이스 역할을 하는 동시에 동적 자원이 되어 수정될 수 있다. 예를 들어, 자바스크립트를 사용해 DOM에 새로운 노드를 추가할 수 있다.
이 코드는 DOM을 업데이트하지만 HTML 문서의 내용을 변경하진 않는다.
2) DOM은 브라우저에 보이는 것이 아니다.
브라우저 뷰 포트에 보이는 것은 렌더 트리로 DOM과 CSSOM의 조합이다. 렌더 트리는 오직 스크린에 그려지는 것으로 구성되어 있어 DOM과는 다르다. 달리 말하면, 렌더링 되는 요소만이 관련 있기 때문에 시각적으로 보이지 않는 요소는 제외된다.
예를 들어, display: none 스타일 속성을 가지고 있는 요소가 있다고 해보자.
DOM은 <p> 요소를 포함시킨다.
그러나 렌더 트리에 해당하는 뷰 포트에 표시되는 내용은 <p> 요소를 포함하지 않는다.
3) DOM은 개발도구에서 보이는 것이 아니다.
개발도구의 요소 검사기는 DOM과 가장 가까운 근사치를 제공한다. 그러나 개발도구의 요소 검사기는 DOM에 없는 추가적인 정보를 포함한다.
가장 좋은 예는 CSS의 가상 요소이다. ::before와 ::after 선택자를 사용하여 생성된 가상 요소는 CSSOM과 렌더 트리의 일부를 구성한다.
하지만, 기술적으로 DOM의 일부는 아니다. DOM은 오직 원본 HTML 문서로부터 빌드되고, 요소에 적용되는 스타일을 포함하지 않기 때문이다. 가상 요소가 DOM의 일부가 아님에도 불구하고, 요소 검사기에서는 아래와 같이 확인된다.
이러한 이유로 가상 요소는 DOM의 일부가 아니기 때문에 자바스크립트에 의해 수정될 수 없다.
5. 요약정리
- DOM은 HTML 문서에 대한 인터페이스이다.
- 첫째, 뷰 포트에 무엇을 렌더링 할지 결정하기 위해 사용
둘째, 페이지의 콘텐츠 및 구조, 그리고 스타일이 자바스크립트 프로그램에 의해 수정되기 위해 사용 - DOM은 원본 HTML 문서 형태와 비슷하지만 몇 가지 차이점이 있다.
- 항상 유효한 HTML 형식이다.
- 자바스크립트에 수정될 수 있는 동적 모델이어야 한다.
- 가상 요소를 포함하지 않는다. (Ex. ::after)
- 보이지 않는 요소를 포함한다. (Ex. display: none)
'Tech > Javascript' 카테고리의 다른 글
| [Javascript] DOM을 조작하는 방법 (0) | 2021.01.27 |
|---|---|
| [Javascript] DOM - Critical Rendering Path (0) | 2021.01.18 |
| [Javascript] 객체 상속 (object-inheritance), Object.create() (0) | 2021.01.03 |
| [Javascript] 객체 상속 (object-inheritance), __proto__ (0) | 2021.01.03 |
| [Javascript] super (0) | 2021.01.03 |