HTML & DOM

브라우저

우리가 사용하고 있는 브라우저는 소프트웨어로 사용자가 요청한 자원(URI 주소)을 받아와서 표시해준다.
주로 HTML파일을 받아와 해석하여 보여주지만, 이미지, PDF 등 여러가지 파일 역시 지원한다.

브라우저는 사용자가 요청하여 받아온 HTML파일을 파싱하여 DOM 트리를 그리고, CSS 파일을 파싱하여 이를 결합한 후 렌더링을 하는 작업을 우리의 화면에 그려주게 된다.

(출처: Naver D2 브라우저는 어떻게 동작하는가?)

우리가 네이버에 들어가기 위해선 https://www.naver.com 이라는 HTTP URL을 브라우저 주소 입력창에 입력하여 접속을 시도해야한다.

네트워크 상의 URL로 페이지를 띄우기 위한 요청을 보내면 해당 주소에서는 필요한 파일들을 브라우저에게 넘겨주게 되는데, 우리가 떠올리는 네이버 페이지를 띄워주기 위해 HTML, CSS, JS등의 파일들을 브라우저에게 넘겨주고, 렌더링 작업을 거쳐 표시된다.

그렇다면 HTML이란?

HTML(HyperText Markup Language)은 웹 페이지를 위한 언어로, 특정 영역이 어떤 성질을 갖는지 미리 정해진 규칙에 따라 구조화된 요소들로 이루어진 마크업 언어이다.
마크업 언어는 태그(<>)를 이용하여 데이터 구조를 명명하는 언어이므로, 태그 안에 담기는 요소들에 따라 영역의 성질이 달라지게 되고 각 영역들이 모여 구조화된 문서를 만든다.

HTML 요소들은 W3C라는 웹 표준기구에서 정한 가이드라인을 기반으로 정해져왔기 때문에 서로 다른 브라우저에서는 표준에 맞게 해석하여 동일 페이지를 사용자에게 보여줄 수 있다.

HTML은 인간이 이해하고 구분할 수 있는 언어로 만들어져 있고, 기계는 이렇게 규약된 언어를 해석할 수 없다. 때문에, 파싱이라는 작업을 거쳐 브라우저가 해석할 수 있는 언어와 구조로 변환하는 작업이 필요하다.
(각 브라우저마다 파서가 다르기 때문에 같은 HTML문서라도 다른 파싱 결과값을 가질 수 있다.)

DOM이란?

이렇게 파싱된 HTML 언어는 트리구조를 갖는 객체로 표현되는데, 이를 DOM(Document Object Model)이라고 한다.
DOM은 문서에 접근할 수 있는 API로, node와 property, method를 갖는 객체로 이루어져 스크립트나 CSS와 같은 언어들이 DOM 구조에 접근 하여 커스텀 할 수 있게 만들어주는 연결 부분 역할을 갖는다.

때문에 DOM을 이용하여 텍스트값을 변경할 수 있고 스타일링 및 노드 구조까지도 바꿀 수 있다.

DOM과 HTML의 차이?

W3C의 DOM 스펙에선, 문서의 의미는 HTML에만 국한된것이 아니라고 한다. XML 역시 DOM을 사용하여 데이터를 관리할 수 있으며, DOM은 다양한 환경과 어플리케이션에서 사용할 수 있는 API라고 설명한다.

HTML은 단순히 규칙에 따라 정해진 태그, 속성값으로 이루어진 언어이며,
DOM은 브라우저가 HTML 파싱한 후 생성되는 객체 모델로, document에 접근가능한 API이다.