HTML과 DOM

📝오늘 배운 내용

HTML이란?

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

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

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

DOM이란?

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

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

HTML과 DOM의 차이

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

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