DOMContentLoaded 로 HTML DOM 데이터를 초기화하기

클릭 다음으로 가장 빈번하게 보게될 자바스크립트의 이벤트입니다.

"DOMContentLoaded" 이벤트를 그대로 읽으면 "DOM 컨텐츠가 로딩 완료" 되었다는 뜻입니다.

바꿔말하면 브라우저가 HTML 문서를 읽어서 파싱한 후 DOM(Document Object Model)이 완성되었으므로, 자바스크립트를 이용해 HTML 문서의 구조와 데이터에 접근할 수 있게 되었다는 뜻입니다.

DOM 완성 후 웹 브라우저는 이 DOM을 이용해 화면에 웹페이지를 그리게 됩니다. 이 과정을 렌더링 과정이라고 하며, "DOMContentLoaded"는 DOM 완성 후 렌더링 시작 전 중간 어디쯤 진행이 되고 있는 것을 말합니다.

정확하게는 HTML DOM 완성 후 CSS 파일이 있으면 CSS 파일을 읽어 파싱한 후 CSSOM 생성, 그리고 렌더링 과정에 들어가면서 렌더링 트리를 생성하게 됩니다.

기술적으로는 복잡한 메커니즘이 있지만, 우리는 "DOMContentLoaded" 이벤트가 DOM 생성 완료 직후 발생하며, 화면에 HTML 페이지가 렌더링 되기 전이고, 자바스크립트를 이용해 DOM에 접근할 수 있고 제어를 할 수 있다는 것만 알면 됩니다.

간단하게 코드로 구현을 해보면

document.addEventListener('DOMContentLoaded', function(){

//여기에 DOM 제어에 필요한 코드와 실행할 함수를 호출

});

거리가 있지만 잠깐 언급을 하고 넘어가자면 jQuery에서는

$(document).ready(function(){

//여기에 DOM 제어에 필요한 코드와 실행할 함수를 호출

);

이런 형태로 코딩을 해서 구현을 합니다.

제이쿼리를 모른다고 가정을 하고, 풀어서 설명을 하면...

$는 제이쿼리 호출 축약어이고, 괄호로 도큐먼트 객체(document)를 감싸서 제이쿼리 도큐먼트 객체로 변환합니다. 도큐먼트 객체, 즉 DOM 이 준비(ready) 되었으면 이름없는 함수(function(){})를 실행한다는 뜻입니다.

"DOMContentLoaded" 이벤트가 호출 되면 DOM 을 제어할 수 있으므로, AJAX를 이용해 비동기로 여러가지 데이터를 가져와 가공한 후, HTML 문서 안에 배치를 하거나 갱신을 해서 문서를 완성하거나, 레이아웃 배치를 바꾸는 등의 작업을 진행할 수 있습니다.

예를 들어 티켓예매 사이트의 예매 페이지라면, HTML 문서는 정적인 내용들만 들어있고, "DOMContentLoaded" 이벤트가 발생하면 AJAX로 현재 예매가 가능한 티켓의 종류와 가능 수량, 금액 등의 정보를 실시간으로 받아와 HTML 페이지를 갱신해줌으로써 최신의 정보를 담을 HTML 페이지를 완성하게 됩니다.

"DOMContentLoaded" 이벤트 처리 함수가 종료되면

웹 브라우저는 갱신된 DOM을 사용해 렌더링 트리를 생성하게 됩니다.

즉, "DOMContentLoaded" 이벤트는 HTML 페이지가 화면에 표시되기 전에 DOM 을 자바스크립트로 제어할 수 있음을 알려주는 중요한 이벤트입니다.

나중에 배우겠지만, 가상으로 예를 들면

document.addEventListener('DOMContentLoaded', function(){

//현재 예매 가능한 티켓정보를 비동기(AJAX)로 가져오기

var json = getAjaxTicketInfo();

updateTicketInfo(json);

});

function getAjaxTicketInfo(){

//AJAX로 티켓정보 가져오기

...

}

function updateTicketInfo(infos){

//DOM 업데이트

...

}

이런식으로 구현을 할 수 있습니다.