[WEB] DOM이란?

웹에서 자바스크립트를 사용하는 이유는 어떤 조건에 맞거나 사용자의 동작이 있을 때 웹 문서 전체 또는 일부분이 동적으로 반응하게 하는데 있다. 이렇게 반응하게 하기 위해서는 웹 문서의 모든 요소를 따로 제어할 수 있어야하는데 이러한 모든 정보 요소에 접근하고 제어할 수 있도록 객체를 사용해 웹 문서를 체계적으로 정리하는 방법이 DOM이다.
HTML로 작성한 웹 문서의 DOM을 HTML DOM이라고 하며 보통 DOM이라고 하면 HTML DOM이다.
DOM은 웹 문서를 하나의 객체로 정의하고 웹 문서를 이루는 텍스트나 이미지, 표 등의 모든 요소도 각각 객체로 정의 한다.

DOM 트리

DOM은 웹 문서의 요소를 부모 요소와 자식 요소로 구분한다.

html 요소는 head, body의 부모 요소이고, body는 h1, img의 부모 요소가 된다. 각각의 태그의 속성또한 자식으로 밑에 붙게 된다.

DOM을 구성하는 기본원칙

1. 모든 HTML 태그는 요소(Element)노드
2. HTML 태그에서 사용하는 텍스트 내용은 자식 노드인 텍스트(text)노드
3. HTML 태그에 있는 속성은 자식 노드인 속성(attribute)노드
4. 주석은 주석(comment)노드