[모던자바스크립트 프로그래밍의 정석]
DOM
웹에서 자바스크립트를 사용하는 큰 이유는, 어떤 조건에 맞거나
사용자 동작이 있을 때 웹 문서 전체 또는 일부분이 동적으로 반응을 하기 때문 입니다.
이렇게 하려면 웹 문서에 담겨 있는 모든 요소를 따로 제어 할수 있어야 합니다.
DOM이란, 자바스크립트 같은 프로그래밍 언어로 웹 문서에 접근하고 제어할 수 있도록 웹 문서를
체계적으로 정리하는 방법을 말합니다.
DOM에서는 웹 문서를 하나의 객체로 정의하고, 웹 문서를 이루는 텍스트나 이미지,
표 등 모든 요소도 각각 객체로 정의합니다.
웹 문서는 여러 가지 태그가 서로 포함 관계를 가지고 있습니다.
예를 들어 <head> 태그 안에 <title> 태그가 들어 있는 때 처럼 말입니다.
이런 포함 관계 때문에 각 태그 간에는 '부모'와 '자식'관계가 생깁니다.
DOM에서 웹 문서를 구조화 하려면 먼저 웹 문서 구조를 부모 요소와 자식 요소로
구분해서 포함 관계를 나타내야 합니다.
DOM은 여기에서 한 단계 더 나아가 문서의 요소 뿐만 아니라 각 요소에서
사용한 속성과 내용도 각 요소의 자식으로 표시합니다.
이렇게 DOM을 활용하여 웹 문서의 요소를 부모와 자식으로 구분해서
표시하다 보면 마치 나무 처럼 모양이 나타나서 이것을
DOM 트리 라고 부릅니다.
DOM 트리에서 가지가 갈라져 나가는 부분은 노드,
DOM 트리에서 시작부분인 html노드는 나무의 뿌리에 해당하는
루트 노드 라고 합니다.루트 노드를 시작으로 웹 문서에서 사용된 각 요소들은 계층 구조를이루고 있어서 각 노드 사이의 관례를 부모와 자식, 형제 간으로 표현 할 수 있습니다.부모 노드에는 자식 노드가 있고 같은 부모 노드를 가진 노드들을 형제 노드 라고합니다.
DOM에서 이런 구조로 웹 문서를 해석 한다는 것을 기억해야 자바스크립트를 사용해어떻게 접근하고, 원하는 부분을 어떤 방식으로 수정할지 이해할 수 있습니다.