DOM

• html 파일을 브라우저에 렌더링(show)하려면 파일이 브라우저가 이해할 수 있는 구조로 메모리에 올라가야 한다.
• 브라우저는 html tag들을 javascript가 이용할 수 있는 객체로 변환하는데 이를 DOM(document object model)라고 한다.
• 즉 DOM은 브라우저가 html 파일을 인식하는 방식이다.

DOM Tree

DOM은 tree구조로 되어있으며 HTML의 모든 요소와 텍스트를 각각 객체로 만들어 객체 간의 부자관계를 표현한다.

• tree 구조에서 각각의 객체들은 node라고 표현한다.
• 예를들어 h1, a같은 element들은 element node라고 부른다.
• 이렇게 브라우저가 html 파일을 읽어 DOM Tree를 생성하는 것을 정적 문서 객체 생성이라고 한다.
• 반대로 js가 DOM API( ex. document.createElement...)를 사용하여 기존의 html파일에 없던 객체(노드)를 생성하는 것을 동적 문서 객체 생성이라고 한다.