돔 DOM

웹브라우저는 HTML 문서를 해석하고, 화면을 통해 해석된 결과를 보여준다.

해석한 HTML코드를 화면을 통해 보여주는 과정을 '렌더링'이라 한다.

 

브라우저는 HTML 코드를 해석해서 요소들을 트리 형태로 구조화해 표현하는 문서(데이터)를 생성한다.

이를 DOM이라 하며, 브라우저는 DOM을 통해 화면에 웹 콘텐츠들을 렌더링한다.

 

Q: DOM은 왜 존재해서 우리를 힘들게 하는 것인가?

A: DOM은 HTML이 해석되어서 렌더링 결과물이 나타나기 전에 생성되는 문서이자 데이터입니다.

HTML코드에 써져 있는 대로 결과를 출력하는게 브라우저의 역할인데 왜 굳이 중간에 DOM 이라고 하는 데이터를 생성하는 이유는

자바스크립트를 사용해서 이 문서에 대한 스크립트를 작성할 수 있게 해주는데 목적이 있기 때문입니다.

 

DOM 은 자바스크립트를 사용해서 웹 콘텐츠를 추가 수정 삭제하거나 마우스 클릭 키보드 타이핑 등의 이벤트에 대한 처리를 정의할 수 이도록 제공되는 프로그래밍 인터페이스입니다. 자바스크립트가 웹문서에 대한 어떤 동작을 구현하고 나면 DOM의 그 결과가 반영되어 웹브라우저 화면이 다시 렌더링 되는 이런 흐름입니다. 

 

HTML코드는 정적인 텍스트 이므로 웹 화면이 사용자와 동적인 상호작용을 하기 위해서는 DOM 이 그 역할을 해줍니다.

따라서 DOM의 존재는 상당히 중요합니다.

 

 

►요약

DOM (문서 객체 모델)이란? 문서 객체 모델, 즉 DOM은 웹 페이지(HTML이나 XML 문서)의 콘텐츠 및 구조, 그리고 스타일 요소를 구조화 시켜 표현하여 프로그래밍 언어가 해당 문서에 접근하여 읽고 조작할 수 있도록 API를 제공하는 일종의 인터페이스입니다.