Rendering
웹브라우저는 HTML 문서를 해석하고, 그의 대한 결과를 화면에 나타나게 해준다. 브라우저가 스스로 해석한 HTML 문서가 화면에 잘 나타도록 보여주는 과정은 'Rendering' 이라고 부른다.
HTML Rendering in Browsers
브라우저는 HTML 코드를 해석하는 과정에 각 요소(element)들을 구조호화 트리 형태로 표현하는 문서를 생성한다 (이 문서는 DOM이라고 부른다). DOM이 생성이 되면 브라우저는 트리를 참조해 브라우저 화면에 렌더링을 하는 것이다.
DOM가 존재하는 이유 (목적)
DOM은 화면에 컨텐츠가 나타나기 전에 HTML 문서를 트리 형태로 구조화해 생성되는 문서이자 데이터이다. 그럼 HTML 문서와 화면 컨텐츠 중간에 껴있는 DOM의 역할은 무엇인가?
바로 자바스크립트 때문이다. 자바스크립트로 통해 DOM을 조작할 수 있다. 구체적으로 이야기 하자면, DOM은 자바스크립트로 통해 추가, 삭제, 수정 하거나 마우스 or 키보드 타이밍 등 다양한 이벤트를 처리할수 있도록 프로그래밍 인터페이스이다. 그래서 HTML 문서를 rendering 하고 DOM에 추가된 동작들이 있으면 그것을 반영하고 다시 화면으로 컨텐츠를 rendering하는 프로세스로가 존재한다고 알 수 있다.
이러한 목적을 통해 웹개발에서 DOM의 중요성을 알 수 있다.
정리
DOM은 HTML 코드를 해석해서 요소들을 (elements) Tree 형태로 표현하는 문서 또는 데이터이다. 그리고 우리는 javaScript로 통해 이 문서/데이터를 통해 다양한 이벤트를 추가할 수 있고 (추가, 삭제, 수정, 등) 마지막으로 javascript 이벤트가 반영되었을 때 rendering을 해서 화면에 나타나게 해주고 사용자는 동작들을 경험할 수 있다.
