웹브라우저는 html 문서를 해석하고, 화면을 통해 그 결과를 보여준다.
해석한 html 코드를 화면을 통해 보여주는 과정을 '렌더링'이라고 한다.
브라우저는 HTML 코드를 해석해서 요소들을 트리 형태로 구조화하여 표현하는 문서(데이터)를 생성한다.
이를 DOM(Document Object MODEL)이라 부르며, 브라우저는 DOM을 통해 화면에 웹 콘텐츠들을 렌더링한다.
HTML 코드는 요소가 다른 요소 안에 포함되는 형태를 띄게 되는데, 그렇기 때문에 Tree형태의 계층 구조를 통해 웹 문서를 표현한다.
즉 DOM은 HTML 단위 하나 하나를 객체로 생각하는 모델로,
각 단위는 하위의 어떤 값을 가지고 있는데 이런 구조를 트리 구조라고 한다.
DOM의 목적
DOM은 HTML이 해석 되어서 렌더링 결과물이 나타나기 ‘전에’ 생성되는 문서이자 데이터 이다.
HTML 코드대로 결과를 출력하는 것이 브라우저의 역활인데
왜 굳이 중간에 DOM이라는 데이터를 생성하는 것이고 JS랑 무슨 관련이 있는 것일까?
이유는 자바스크립트를 사용해서 이 문서에 대한 스크립트를 작성할 수 있게 하기 위해서다.
Script란?
Js로 작성한 프로그램을 스트립트(script)라고 한다.
DOM은 Js를 사용해서 웹 콘텐츠를 추가, 수정, 삭제 하거나
마우스 클릭 등 여러 이벤트에 대한 처리를 정의할 수 있도록 제공되는 프로그래밍 인터페이스이다.
Js가 웹 문서에 대한 어떤 동작을 구현하면, DOM에 그 결과가 반영되어 웹브라우저 화면이 다시 렌더링 되는 흐름이다.
HTML코드는 정적인 텍스트이므로 웹 화면이 사용자와 동적인 상호 작용을 하기 위해서는 DOM이 이 역활을 하기 때문에 DOM은 매우 중요한 역할을 차지한다.
Interface란?
IT 계열에선 사용자가 기기를 쉽게 동작 시키기 위해 도움을 주는 시스템을 의미하며
2개 이상의 장치나 소프트웨어 사이에서 정보나 신호를 주고 받을 때 그 사이를 연결하는 연결장치나 경계면 또는 연결하는 경계에서 상호 접속하기 위한 하드웨어, 소프트웨어, 조건, 규약 등을 말한다.
컴퓨터와 사용자 간의 통신이 가능하도록 하는 장치나 프로그램을 의미하기도 하며, 넓은 의미로 서로 다른 물체 사이에서 상호 간 대화하는 방법을 의미하기도 한다.
즉 정리하자면❗
DOM의 정의 ✔
DOM(Document Object MODEL)은
HTML 코드를 해석해서 요소들을 트리 형태로 구조화하여 표현하는 문서(데이터)
DOM의 역할 📑
- DOM은 HTML 코드를 해석해서 요소들을 트리 형태로 구조화해 표현하는 형식이다.
- DOM은 자바스크립트를 사용해서 웹 화면의 콘텐츠를 추가, 수정, 삭제하거나 이벤트를 처리할 수 있도록 프로그래밍 인터페이스를 제공한다.
- DOM은 노드(node)라고 불리는 계층적 단위에 정보를 저장하고 있다. DOM은 이러한 노드들을 정의하고, 그들 사이의 관계를 설명해주는 역할을 한다.
DOM Tree
HTML 문서의 각 요소들을 객체화 시키고 트리 구조로 구성한 것이 바로 ‘DOM’이다.
그리고 이 때 만들어지는 ‘Tree’를 DOM Tree라고 한다.
DOM Tree는 4종류의 노드로 나뉜다.
Node란?
HTML문서에 관한 모든 것을 담고 있는, 계층적 정보 단위. 즉 DOM Tree를 구성하는
최소한의 단위이며, 기본 요소
- 문서 노드
트리의 최상위 루트노드로 document 객체를 가리킨다.
HTML 문서 전체를 가르키는 객체로 전역객체 window의 document 프로퍼티에 바인딩 되어있다.
(하나의 HTML 문서당 유일하게 하나의 document만 가진다)
각 요소, 속성(attribute), 텍스트에 접근하려면 문서 노드를 통해야 한다.
그리고 ‘DOM Tree’의 시작점이라 할 수 있다.
바인딩(Binding)
”묶다”라는 사전적 의미로, 두 데이터 혹은 정보의 소스를 일치시키는 기법을 의미.
- 요소 노드
요소 노드는 ‘HTML’의 요소들을 말한다.
예를 들면 body, div, html같은 ‘HTML’의 구성 요소를 말한다.
(즉 HTML 태그요소들이 요소노드)
Attribute, 텍스트에 접근하기 위해서는 요소 노드들을 거쳐야한다.
모든 요소 노드는 ‘HTMLElement’객체를 상속하게 된다.
- Attribute(속성) 노드
Attribute는 ‘HTML’요소에서 속성 값을 말한다.
a 태그의 ‘href’,’target’등을 이야기한다.
HTML의 속성을 가르키는 객체로 요소노드와 연결되어 있다.
단 부모노드와 연결되어 있는 것이 아닌 HTML 요소의 요소 노드와 연결 되어있다.
Attribute는 요소 노드의 일부여서 해당 요소 노드를 찾아 접근하여 수정이 가능하다.
- 텍스트 노드
텍스트 노드는 HTML의 각 요소의 내용을 말한다.
요소에 속해서 웹페이지 상에 나오는 각종 정보들은 여기에 속한다고 할 수 있다.
텍스트 노드는 요소 노드의 자식이며 자식 노드를 가질 수 없다. 즉 텍스트 노드는 DOM Tree의 최종 단계 노드라 할 수 있다.
What I Will?
- 추후 가상DOM을 공부 해봐야겠다.
- script 하니까 얼핏 들은 Js의 이름의 기원과 역사가 떠올랐고 어렴풋이 기억나기 때문에 후에 js의 역사에 대해서도 다뤄야겠다고 느꼈다.
- 인터페이스에 대한 공부가 필요하다고 느꼈다.
- 렌더링 하니까 전에 배웠던 SSR과 CSR이 떠올라 이에 대한 개념을 다시 한번 되짚고 가야겠다는 생각이 들었다
