문서 객체 모델(Document Object Model = DOM) ★
웹에서 자바스크립트를 사용하는 이유는 어떤 조건에 맞거나 사용자의 동작이 있을 때 웹 문서 전체 또는 일부분이 동적으로 반응하게 만들기 위해서다.
이렇게 반응하게 하려면 웹 문서의 모든 요소를 따로 제어할 수 있어야한다.
예를 들어 웹 문서에 텍스트와 이미지가 들어 있다면 웹 브라우저는 마크업 정보를 보면서 텍스트 단락이 몇 개고, 내용이 무엇인지 살펴본 후 저장한다.
또 이미지가 몇 개고, 이미지의 파일 경로는 어디고, 대체 텍스트는 무엇인지도 파악해서 이미지 별로 다 정리해서 인식한다.
이런 텍스트나 이미지 요소를 브라우저가 제어하려면 두 요소를 따로 구별하여 인식해야 한다.
이러한 모든 정보 요소를 자바스크립트로 가져와서 프로그래밍할 때 DOM을 이용한다.
즉, 문서 객체 모델은 자바스크립트를 이용하여 웹 문서에 접근하고 제어할 수 있도록 객체를 사용해 웹 문서를 체계적으로 관리하는 방법을 말한다.
HTML문서로 작성한 웹 문서의 DOM을 HTML DOM이라고 부르고,
XML문서에서 사용하는 XML DOM도 있다.
DOM은 웹 문서를 하나의 객체로 정의한다. 그리고 웹 문서를 이루는 이미지나 텍스트, 표 등의 모든 요소도 각각 객체로 정의한다.
웹 문서 전체는 document객체이고, 이미지는 image 객체이다.
즉 웹문서 안의 모든 태그는 객체로 인식하고 처리한다.
DOM트리
자바스크립트로 DOM을 조작하려면 실제 웹 문서가 DOM으로 어떻게 표현되는지 알아야한다.
DOM은 웹 문서의 요소를 부모요소와 자식요소로 구분한다.
예를 들어 HTML 최상위 객체 안에는 head와 body 자식 요소가 있고,
head 안에는 title, meta, link와 같은 자식 요소를 포함한다.
body 안에는 div, header, main, footer와 같은 자식 요소를 포함한다.
이 모습을 도표로 그려보면 마치 나무 뿌리와 닮았다고 하여 DOM TREE라고 부른다.
DOM TREE의 최상위 객체는 자바스크립트에서 document라고 표현한다.
또한 태그 요소는 여러 속성들이 들어간다.
태그 요소 안에 들어있는 속성이나 내용들도 자식으로 나타낸다.
<a href="#">링크</a> 여기에서 a태그의 자식은 href와 사이에 들어가는 말도 자식이다.
