DOM이란 무엇일까?
DOM이란 웹페이지의 HTML을 계층화시켜 트리구조로 만든 객체(Object) 모델이다. DOM은 HTML인 웹페이지와 JavaScript를 서로 잇는 역할을 한다.
문서의 구조화된 표현을 제공함으로써 프로그래밍 언어가 DOM 구조에 접근할 수 있도록 해주는 매우 중요한 역할을 하는데, 개발자는 DOM 구조에 접근하여 문서 구조를 바꾸거나 스타일과 내용 등을 변경하고 이벤트를 연결시키는 등 다양한 작업을 할 수 있다. 우리가 흔히 쓰는 javascript언어를 통해 HTML 태그를 변경/추가/삭제하고 CSS 스타일을 바꾸고 조정하는 것이 DOM이 중간에서 연결해주는 역할을 하기때문에 가능하다고 할 수 있다. DOM 없이는 자바스크립트가 웹페이지의 요소들에 대한 정보를 가지고 접근하여 조작하는 것이 불가능하다.
위 그림에서 확인 할 수 있는 것처럼 문서안의 모든 element는 문서를 위한 DOM의 한 부분이다. 이렇게 트리형으로 구조화 되어있기 때문에 자바스크립트와 같은 스크립팅 언어로 원하는 element에 접근하여 조작이 가능한 것이다.
1. DOM을 어떻게 활용할까?
DOM은 프로그래밍 언어가 DOM에 접근하고 수정할 수 있도록 방법을 제공하는데, 일반적으로는 프로퍼티와 메서드를 가지고 있는 자바스크립트 객체로 제공한다. 이것이 DOM API이다. 정적인 웹페이지에 접근해서 동적으로 변경하기 위해서는 메모리 상의 DOM을 변경하는 것인데, DOM을 조작하는데 필요한 것이 DOM API라고 생각하면 된다.
브라우저는 HTML 문서를 로드하고 해당 문서에 대한 모델을 메모리에 생성하는데, 이때 생성되는 트리 모양의 모델이 DOM tree이다.
2. DOM tree
위와 같이 HTML코드를 작성하여 브라우저가 로드 후 파싱하면 아래와 같은 DOM tree 모델을 생성하게 된다.
