[JavaScript] DOM (Document Object Model)

Front-End/JavaScript

[JavaScript] DOM (Document Object Model)

Voyage_dev 2022. 3. 2. 18:42

DOM이란

웹 페이지에 대한 프로그래밍 인터페이스이다. 기본적으로 여러 프로그램들이 페이지의 콘텐츠 및 구조, 그리고 스타일을 읽고 조작할 수 있는 API를 제공한다

Document Object Model을 번역해보면 문서 객체 모델로 번역할 수 있다. 문서 객체란 <html><body> 같은 html 문서의 태그들을 자바스크립트가 이용할 수 있는 객체 즉, object로 만들면 문서 객체라고 한다

넓은 의미로는 웹 브라우저가 HTML 페이지를 인식하는 방식이고 좁은 의로 본다면 document 객체와 관련된 객체의 집합을 의미할 수 있다

이러한 DOM을 이해하기 전에는 웹 페이지가 어떻게 빌드 되는지 봐야한다

웹 페이지가 만들어지는 방법

웹 브라우저가 HTML 문서를 읽어들이면 스타일을 입히고 대화형 페이지로 만들어 뷰포트에 표시하기까지의 과정을 Critical Rendering Path, ‘CRP’라고 한다

CRP 6단계

DOM 트리 구축 → CSSOM 트리 구축 → JavScript 실행 → 렌더 트리 구축 → 레이아웃 생성 → 페인팅

위와 같이 CRP 과정은 6단계로 나누어져 있지만, 이 단계들을 대략 두 단계로 나눌 수 있다

첫 번째 단계에서 브라우저는 읽어들인 문서를 파싱하여 최종적으로 어떤 내용을 페이지에 렌더링할지 결정한다 → 렌더 트리 생성
두 번째 단계에서 브라우저는 해당 렌더링을 수행한다

렌더 트리

첫 번째 단계를 거치면 렌더 트리가 생성된다

렌더 트리는 웹 페이지에 표시될 HTML 요소들과 이와 관련된 스타일 요소들로 구성된다. 브라우저는 렌더 트리를 생성하기 위해 두 모델이 필요하다

DOM (Document Object Model) : HTML 요소들의 구조화된 표현
CSSOM (Cascading Style Sheets Object Model) : 요소들과 연관된 정보의 구조화된 표현

Tree 자료구조

DOM 을 제대로 이해하기 위해서는 Tree 라는 자료구조를 이해할 필요가 있다 why? DOM이 Tree 형식의 자료구조를 가지고 있기 때문이다 이름에서 알 수 있듯이 하나의 Root Model 에서 시작된다. 위의 Root Node에서 아래로 퍼져나가는 형태로 그린다

Tree에서 위쪽의 Node를 부모 (parent) 노드 / 아랫쪽 노드를 자식 (Child) 이라 한다. Root Node는 가장 위에서 시작되는 Node이므로 parent가 없는 Node. 그리고 children (자식)이 없는 Node를 Leaf Node라고 불린다. 즉, 뿌리 Root에서 시작해서 입 Leaf에서 끝나는 형태

NODE?

여기서 노드란 Tree 구조에서 Root 노드를 포함한 모든 개개의 개체를 Node라고 표현한다. 태그뿐만 아니라 태그 안의 텍스트나 속성들도 모두 Node에 속한다

이중 HTML 태그를 요소노드 (Element Node)라고 불리며 요소 노드 안에 있는 글자를 Text 노드 (Text Node)라고 부르기도 한다

DOM의 생성 방식

DOM은 원본 HTML 문서의 객체 기반 표현 방식이며 DOM의 개체 구조는 노드 트리 (하나의 부모 줄기가 여러개의 자식 나뭇거지 및 나뭇잎들을 가질 수 있는 구조)로 표현된다

HTML 예시

노드 트리로 표현시

DOM과 HTML의 차이

DOM은 HTML이 아니다

DOM은 HTML 문서로부터 생성되지만 항상 동일하지 않다.
HTML : 화면에 보이고자 하는 모양과 구조를 문서로 만든 것으로 단순 텍스트로 구성되어 있다 (최초에 화면을 그릴때 사용하는 설계도)
DOM : HTML 문서의 내용과 구조가 객체 모델로 변화되어 다양한 프로그램에서 사용될 수 있다 (설계도를 이용하여 실제로 화면에 나타내지는 인터페이스)

DOM이 원본 HTML 소스와 다를 수 있는 두 가지 케이스가 있다

작성된 HTML 문서가 유효하지 않을 때
- DOM은 유효한 HTML 문서의 인터페이스. DOM을 생성하는 동안, 브라우저는 유효하지 않은 HTML코드를 올바르게 교정한다

head와 body 태그 요소가 빠져있지만 DOM 트리에는 올바르게 교정되어 나타난다

또 다른 케이스는 자바스크립트에 의해 DOM이 수정될때
- DOM은 HTML 문서의 내용을 볼 수 있는 인터페이스 역할을 하는 동시에 동적 자원이 되어 수정될 수 있다

위 코드는 DOM에 새로운 노드를 추가하는 코드이며 DOM을 업데이트 하지만 HTML 문서의 내용을 변경하지는 않는다

JavaScript로 문서객체를 생성한다는 것

문서 객체가 생성되는 방식은 두 가지

웹 브라우저가 HTML 페이지에 적혀 있는 태그를 읽으면 생성하는 것. 이런 과정을 정적으로 문서 객체를 생성한다고 말하며 단순히 적혀지 있는 그대로 문서객체가 생성되는 것을 표현한 것이다
원래 HTML 페이지에 없던 문서 객체를 JavaScript를 이용해 생성. 이런 과정을 동적으로 문서 객체를 생성한다고 하며 JavaScript로 문서 객체를 생성한다는 것은 처음에는 HTML 페이지에 없던 문서객체를 동적으로 생성하는 것이다

DOM은 브라우저에서 보이는 것이 아니다

브라우저 뷰 포트에 보이는 것은 렌더 트리로 DOM과 CSSOM의 조합이다 렌더 트리는 오직 렌더링 되는 요소만 관련이 있고 스크린에 그려지는 것으로 구성되어 있어 시각적으로 보이지 안흔 ㄴ요소들은 제외되기 때문에 DOM과는 다르다 DOM은 보이지 않는 요소를 포함하고 렌더 트리는 제외한다

예를들어, display:none 스타일 속성을 가지고 있는 요소라면