DOM(Document Object Model) - onload 이벤트
요청 웹프로그램(웹문서)의 실행결과를 응답받아 출력되는 영역을 자바스크립트에서는
document 객체로 표현하며 document 객체에 출력되는 태그(박스모델)는 Element 객체로 표현하여 처리
DOM : 브라우저의 출력영역(document 객체)을 기반으로 제공되는 자바스크립트 객체
브라우저에서 이벤트가 발생될 경우 이벤트 처리 명령으로 박스모델(Element 객체)을
조작하여 동적인 페이지 제공 - DHTML(Dynamic HTML)
이벤트(Event) : 태그(박스모델)에서 발생되는 다양한 사건
이벤트 처리(Event Handle) : 태그에서 발생된 이벤트에 대한 처리 명령 - 자바스트립트 이용
페이지를 구성하는 모든 태그가 Element 객체로 표현되어 있어야지만 이벤트를 이용하여
동적인 페이지 구현 가능 - DOM Tree 완성 후 Element 객체 조작 가능
DOM Tree : document 객체를 최상위 부모 객체로 두고 모든 태그가 Element 객체로
트리(Tree) 형식의 계층적 구조로 메모리에 표현되어 있는 상태
DOM Tree는 웹문서를 모두 읽어 DOM Parser에 의해 해석(parsing)된 경우 완성
- 태그의 이벤트 속성을 객체의 프로퍼티로 사용하여 이벤트 처리 함수 등록 가능
> 태그에서 이벤트가 발생되면 이벤트 처리 함수가 자동 호출되어 실행window.onload=function() { alert("DOM Tree가 완성되어 동적인 페이지 구현이 가능합니다."); }
- body 태그의 onload 이벤트 속성 : body 태그를 모두 읽은 경우에 대한 이벤트 속성 - DOM Tree 완성
> onload 이벤트 속성값으로 이벤트 처리 명령(자바스크립트 - 이벤트 처리 함수 호출) 설정<body onload="javascript:load();"> <!-- javascript 접두사 생략 가능 -->
- body 태그의 마지막 자식태그로 script 태그 작성
