DOM

문서 객체 모듈 (DOM - Document Object Model)

- 넓은 의미로 웹 브라우저가 html페이지를 인식하는 방식  
- 좁은 의미로 document 객체와 관련된 객체의 집합

 

브라우저는 html 페이지를 로드하는 과정에서 각 html태그를 하나의 객체로 만든다.

예를 들어 div 태그 안에 ...로 구성된 요소는 div객체로 생성한다.
html 문서의 각 요소를 객체화한 것이라는 뜻으로 html dom(documnet object model)이라고 힌다.

브라우저는 html 페이지를 로드하면서 html 태그의 포함관계에 따라 dom 객체들을 트리 구조로 만드는데 

이것을 dom트리라고 한다. 

dom 트리의 루트는 document 객체다. 
 - 문서 객체 모델을 사용하면 html 페이지에 태그를 추가, 수정, 제거 가능 
 -  자바스크립트에서 이용할 수 있는 객체로 만들면 문서 객체

window.onload = function(){ 
var headerobject = document.getElementById("header"); 
headerobject.style.color="red"; 
}

window.onclick = function(){ 
var headerobject = document.getElementById("header"); 
headerobject.style.color="red"; 
}

<pre>window.onload</pre>  의미 - window 객체가 로드가 완료되고 자동으로 할당한 함수를 실행한다.
  - HTML 페이지에 존재하는 모든 태그가 화면에 올라가는 순간이 로드가 완료되는 순간이다. 
  - window 객체의 onload속성을 의미하여 문서 객체의 속성 중 on으로 시작하는 속성을 이벤트 속성이라고 한다.
   이 속성에는 함수르 할당해야 한다.
  => window 객체의 onload 속성 함수 자료형을 할당하는 것을 "이벤트를 연결한다"라고 한다.
  => 이벤트 이름 또는 이벤트 타입(type)은 load이고
  => 이벤트 속성은 onload이고
  => 이벤트 리스너 또는 이벤트 핸들러는 이벤트 속성에 할당한 함수이다.
여기서 headerobject 객체를 문서 객체라고 한다.
getElementById()메서드는 Dom 트리에서 id 속성 값이 'header'인 dom 객체를 찾아서 리턴한다.
id 속성 값이 'header'인 객체가 없으면 null을 리턴한다.
같은 값을 가진 객체가 여러개 있다면 HTML 페이지에 가장 먼저 나오는 객체를 리턴한다.