DOM 객체에 대해 - 1

자바스크립트를 통해 웹이나 브라우저를 제어하는 것을 경험해보다 보니,
HTML 문서에 접근할 때 사용할 수 있는 다양한 객체가 있는 것을 확인할 수 있었다.

위 예시에서 나오는 childNodes, children 이 두 가지 또한 다루어볼 계획이다. -> DOM 객체의 구조를 이루는 Node에 대해 다루면 좋을듯.

아무튼, 다양한 객체가 존재하는 것을 확인할 수 있는데 아무 값을 가지고 있지 않는 것도 있고 값이 이미 정해진 것들도 있다.

DOM(The Document Object Model) HTML 문서의 내용(contents) 또는 다양한 설정값을 가지고 있는 Programming Interface로, 이러한 작은 객체를 총망라한 DOM 객체를 통해서 우리가 JS 같은 프로그래밍 언어로 제어할 수 있는 것이다.

HTML 요소 뿐만 아니라, CSS 요소 또한 객체로 표현이 되는데 아래 그림을 통해 웹 문서가 어떻게 브라우저에서 그려지는지 과정을 파악할 수 있다.

이 과정은 크게 두 가지로 나눌 수 있는데,

1. HTML 문서를 구조화한 객체인 DOM 객체와 CSS 정보를 구조화한 CSSOM 객체 두 가지가 모여 브라우저가 렌더 트리(Render Tree)를 생성한다.

2. 브라우저는 이렇게 문서를 파싱한 뒤, 그 정보를 가지고 생성한 렌더 트리를 화면에 보여주는 것이다. DOM 객체는 시각화되지 않는다. 단지 문서에 접근할 수 있게 도와주는 인터페이스일뿐!

다음 포스트에서는 노드 트리로 구성된 DOM 객체의 구조에 대해서 다루어 볼 것이다.