DOM(Document Object Model)

HTML

웹페이지를 만들면 HTML 파일을 브라우저에서 읽게 된다. 브라우저에서는 body 태그, section 태그 이런 각각의 태그들을 분석해서 이것을 노드로 변환하게 한다. 즉 브라우저가 이해할 수 있는 자신들 만의 오브젝트로 변환한다.

 

HTML        JavaScript

Tag     =>  Node

 

HTML에서 쓰인 Tag가 자바스크립트에서는 Node라는 오브젝트로 변환이 된다. 그리고 이 Node의 오브젝트 안에는 태그 안에 작성했었던 클래스라던지 텍스트 같은 모든 정보들이 포함이 되어있다.

Node

Node라는 오브젝트는 EventTarget이라는 오브젝트를 상속한다. 즉 모든 Node는 이벤트가 발생할 수 있다.

document도 Node를 상속하기 때문에 document도 Node이기 때문에 또 Node는 EventTarget이기 때문에

document에서도 이벤트가 발생할 수 있다. 사용자가 이미지나 이런 HTML 요소들을 Element로 변환이 된다.

그래서 Element도 Node이고 Node는 EventTarget이기 때문에 모든 요소에서 이벤트가 발생할 수 있다.

텍스트도 마찬가지이다. Node의 종류는 굉장히 다양하다. Element 안에서도 다양한 element들이 있는데

html 요소라면 htmlelement가 되고, SVG 요소라면 SVGElement라는 이런 각각의 타입별로 Element가 존재하게 된다.

 

 

 

 

그러면 htmlelement 안에는 어떤 태그를 쓰느냐에 따라서 HTMLInputElement될 수 있고 HTMLDivElement가 될 수 있다. HTMLImageElement가 될 수 있고 굉장히 많은 태그별로 element가 존재한다. 즉 모든 태그의 요소들은 각각 html 태그의 element이고 이런 각각의 html 태그의 element는 html의 element이고 htmlelement는 결국 element이고 element는 결국 Node이고 Node는 EventTarget이다.

 

 

 

 

다시 웹페이지로 돌아와서 브라우저가 우리의 웹페이지 즉 HTML 파일을 읽어서 한 줄 한 줄씩 읽으면서 DON tree로 변화하게 된다. Document Object Model의 트리로 변환해서 브라우저가 이해할 수 있도록 자신들만의 Object tree로 만들어나가는 것을 말한다. 전반적인 전체 html은 제일 상위에 HTMLHtmlElement라고 Node가 정의 되어져 있고 body는 이 HTML 안에 이렇게 들어 있다. 그리고 head도 이렇게(참고영상) 들어있다. 즉 htmlhtmlelement 안에는 htmlheadelement와 htmlbodyelement가 들어있다. 기본적인 html문서에 보면 head와 이렇게 body 두 가지의 박스가 들어있는거랑 같다. head안에 보면 meta 태그 두개, title과 link 이렇게 총 네 가지가 있다.

 

 

 

 

Document Object Model 트리 안에도 head 안에는 이렇게 meta 두 개 title, link 이렇게 각각 네 개가 있다.

그래서 html에 있는 각각의 태그들이 DOM 요소랑 이렇게 하나하나씩 맞물려지는거다. HTML 태그에는 그에 상응하는 DOM 트리 요소가 있다. body 안에도 크게 section 박스 하나와 span 이렇게 두 개가 들어 있다. 그래서 body Element 안에는 이렇게 htmlsectionelement 하나와 htmlspanelement 두 개가 있다.

 

 

 

 

당연히 section 안에도 img와h1과 h3가 있으니까 imge, heading, heading3 이렇게 이것도 각각HTMLImageElement, HTMLHeadingElement, HTMLHeadingElement 이렇게 각각 들어 있다. heading에는 또 텍스트가 들어있다. 그래서 H1 안에는 TextNode라는 각각의 TextNode가 들어있다. 이 TextNode 안에는 사용자가 작성한 텍스트 Dream coding과 don't forget to code your dream 이런 애들이 존재한다. span에도 동일하게 Hello World!가 있으니까 TextNode가 존재한다.

 

 

 

 

HTML 파일을 브라우저에서 읽으면 브라우저도 실행되고 있는 어플리케이션이기 때문에 이 어플리케이션이 이해할 수 있는 즉 메모리에 보관할 수 있는 오브젝트로 변환하게 된다. 이렇게 브라우저 위에서는 우리의 각각의 태그들이 그에 맞는 오브젝트로 mapping이 되어있고 나무형식으로 HTML은 head와 body를 가지고 있고 body 안에는 section과 span이 있고 section 안에는 img와 h1, h3 헤딩들이 들어있다. 이런 식의 구조가 작성되어져 있다.

 

 

 

 

저번에 본거 처럼 브라우저가 실행될 때 사용자의 웹페이지를 읽으면 글로벌 오브젝트에는 window가 들어있고 window에는 document라는 것이 들어있다. Document Object Model 안에는 사용자의 페이지별로 각각 정의한 요소들이 나무 형태로 요소들 마다 각각의 뿌리를 이렇게 가면서 구성되어져 있다. 그리고 window 안에는 이렇게 BOM 브라우저에 관련된 오브젝트들 navigator, location, fetch, storage 등등 다양한 것들을 쓸 수 있고, 기본적인 자바스크립트에 관련된 오브젝트 array, map, date ... 등 이런 애들이 존재한다. 이렇게 큰 그림을 머릿속에 넣고 조금 더 세부적인 내용을 알아가보자.

 

참고: https://academy.dream-coding.com/courses/take/browser101/lessons/14136534-4-1-dom

Dream Coding

 

Dream Coding

https://academy.dream-coding.com/courses/browser101

프론트엔드 필수 브라우저 101 (자바스크립트 마스터 | 디버깅, 성능 분석, 실전 프로젝트 10개)