[Java Script] DOM

Document Object Model

문서 객체 모델(DOM, Document Object Model)은 XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스입니다.

이 객체 모델은 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공합니다.

이러한 DOM은 W3C의 표준 객체 모델이며, 다음과 같이 계층 구조로 표현됩니다.

DOM Tree

자바스크립트는 이러한 객체 모델을 이용하여 다음과 같은 작업을 할 수 있습니다.

1)새로운 HTML 요소나 속성을 추가할 수 있다.
2) 존재하는 HTML 요소나 속성을 제거할 수 있다.
3) HTML 문서의 모든 HTML 요소를 변경할 수 있다.
4) HTML 문서의 모든 HTML 속성을 변경할 수 있다.
5) HTML 문서의 모든 CSS 스타일을 변경할 수 있다.
6) HTML 문서에 새로운 HTML 이벤트를 추가할 수 있다.
7) HTML 문서의 모든 HTML 이벤트에 반응할 수 있다.

이렇게 HTML이 파싱을 거치면 DOM tree,
CSS가 파싱을 거치면 CSSOM tree,
Javascript가 파싱을 거치면 AST(Abstract Syntax Tree)가 된다.

DOM API
Javascript는 DOM에 직접 관여할 수 있다. (createElement, appendChild 등)

Javascript를 통해 DOM의 노드들을 탐색할 수도 있다.(querySelector, getElementById 등)

그 이유는 DOM이 DOM을 탐색하고 조작할 수 있는 DOM API를 제공하기 때문이다.

javascript 코드가 DOM API를 통해 DOM이나 CSSOM을 변경하면, DOM과 CSSOM은 다시 결합하여 렌더트리를 형성하고 렌더트리를 기반으로 브라우저에 다시 렌더링 된다.