출처: https://wit.nts-corp.com/2019/02/14/5522
DOM은 무엇인가?
Document Object Model 은 웹 페이지에 대한 인터페이스이다.
기본적으로 여러 프로그램들이 페이지의 콘텐츠 및 구조, 스타일을 읽고 조작할 수 있도록 API를 제공한다.
웹페이지는 어떻게 만들어지는가?
웹 브라우저가 원본 HTML의 문서를 읽어들인 후에, 스타일을 입히고 대화형 페이지로 만들어서 viewport에 표시하는 과정을
Critical Rendering Path 라고 한다.
1번째 단계에서 브라우저는 읽어들인 문서를 파싱하여 최종적으로 어떤 내용을 페이지에 렌더링 할지 결정한다.
그리고 2번째 단계에서 브라우저는 해당 렌더링을 수행한다.
1번째 과정을 거치면 "렌더 트리"가 생성되고
렌더 트리는 웹페이지에 표시될 html요소들과 이와 관련된 스타일 요소들로 구성한다.
브라우저는 렌더트리를 생성하기 위해서 다음과 같은 2개의 모델이 필요하다.
- DOM (Document Object Model) : HTML 요소들의 구조화된 표현
- CSSOM (Cascading Style Sheets Object Model) : 요소들과 연관된 스타일 정보의 구조화된 표현
DOM은 어떻게 생성될까?
DOM은 원본 html 문서의 객체 기반 표현 방식이다.
DOM은 단순 text로 구성된 html 문서의 내용과 구조가 객체 모델로 변환되어서 다양한 프로그램에서 사용될 수 있다는 장점이 있다.
DOM의 개체 구조는 "노드 트리"로 표현되는데, 하나의 부모 줄기가 여러개의 자식 나뭇가지를 갖고 있고, 또 각각의 나뭇가지는 잎들을 가질 수 있는 나무와 같은 구조로 이루어지기 때문이다.
이때 <html>은 부모 줄기이고, 내포된 태그들은 자식 나뭇가지, 그리고 그 나뭇가지 안의 컨텐츠는 잎으로 표현된다.
DOM은 HTML이 아니다.
DOM은 HTML 문서로부터 생성되지만, 항상 동일하지는 않다.
만약
<body>
Hi
</body>라는 html코드가 있을 경우, 이 경우는 올바르지 않은 html코드이나, DOM트리에는 올바르게 교정되어서 나타난다.
또한, DOM은 자바스크립트를 사용해서 새로운 노드를 추가시킬수 있다.
DOM은 브라우저에서 보이지 않는다.
<p style="display: none">
HI
</p>위 코드의 경우, DOM은 p태그를 포함시키지만, 화면에 보여지는 렌더트리는 p를 포함하지 않는다.
'개발 > Web Programming' 카테고리의 다른 글
| [React] 아무리 style-components를 사용해도 스타일이 안바뀔때 (0) | 2020.09.11 |
|---|---|
| 브라우저는 어떻게 동작하는가? (0) | 2020.09.09 |
| React Hook 재정리 (0) | 2020.09.07 |
| [Redux] dispatch란? (0) | 2020.09.04 |
| [React] withRouter vs useHistory,useParams,useLocation (0) | 2020.09.04 |
