JavaScript를 공부하다보면 DOM에 대해서 자주 듣게 됩니다. 이번 포스팅에서는 이 DOM의 목적은 DOM이란 놈은 뭔지 한번 알아보겠습니다
HTML 태그를 오른쪽 그림처럼 트리형태의 자료구조로 만든 것이 DOM 트리입니다. 각각의 태그가 객체가 되어서 출력한 모양과 콘텐츠를 제어할 수 있게 만든거죠. DOM이 있고 그위에 BOM은 뭔지는 다음 포스팅에서 자세히 알려드리겠습니다.
1. HTML DOM의 목적은 무엇일까?
DOM 객체는 html 페이지에 작성된 각 html 태그를 객체로 만든 것이다. html 페이지가 출력된 후, DOM 객체를 통해 html 태그가 출력된 모양과 콘텐츠를 제어하기 위해서 html 태그를 개체로 만든다.
1) DOM 객체를 통해 css3 스타일의 프로퍼티 값을 바꾸면 html 태그가 출력된 색이나 모양을 동적으로 제어할 수 있다.
2) DOM 객체를 통해 html 태그의 콘텐츠, 즉 텍스트나 이미지도 바꿀수 있다.
2. DOM tree그리기
dom 트리의 루트는 document 객체이다. 그러나 document 객체는 DOM 객체가 아니다.
dom 객체의 종류는 html 태그 종류 만큼 있다.
html 태그당 dom객체가 하나씩 생성된다.
dom 트리는 html 태그의 포함관계에 따라서 부모 자식 관계로 구성된다.
3. HTML 페이지가 태그를 읽는 방법
브라우저는 HTML 페이지를 읽으면서 HTML 태그를 화면에 바로 출력하는 것이 아니다!
브라우저가 HTML 태그로 부터 먼저 DOM 객체를 생서하고 DOM 트리를 구성한후, DOM 객체를 화면에 출력하는 것이다! HTML 페이지는 로드된 후 사라지며, 브라우저에는 DOM 객체와 DOM 트리만이 존재하는 것이다.
그러므로 Javascript 코드로 DOM 객체를 제어하면 그에 따라 즉각 브라우저 화면에서 HTML 태그의 모양이나 콘텐츠가 바뀌는 것이다.