DOM요소들은 언제 사용가능 해지는가?

Javascript 공부를 하다가 Ajaxian의 'When do DOM elements become avilable?'을 읽게 되었습니다.

만약 <div id="foo">라는 element를 생성하고 이 element를 얻어오는 getEelementById('foo')를 호출했을 때 foo element를 확실히 얻어올 수 있는가?

- When do DOM elements becom available to embedded scripts? -
Dave Flanagan   

일반적인 경우에 안전한 처리를 위하여 onload()를 호출하여 처리합니다.(load 이벤트는 모든 문서들이 다 로딩된 다음에 발생합니다. 이 시점에 문서안의 모든 객체들은 DOM안에 존재하게 됩니다.) 그러나, HTML문서의 body에 포함되어 있는 스크립트 태그를 사용하는 경우에, 브라우저 벤더들이 HTML파일이 파싱되는 도중에 DOM을 사용가능하게 하는 것으로 보여지므로, Document에 들어가 있지 않은 element에 접근할 수 있다는 것이 Dave Flanagan씨가 가진 문제였습니다.

그가 알고 싶었던 것은 DOM element들의 로딩완료 시점이 언제인가 였습니다 .

이문제의 해결책을 내놓은 Dean Edwards씨의 경우는 이문제와 조금 다른 문제를 가졌습니다. onload이벤트에 초기화 작업을 놓을 때, 이미지가 많이들어있는 HTML페이지에서 DOM에 접근하기 위해서는 이미지들이 모두 로딩된 다음에서야 실행될 수 있는 문제점이 있었습니다.

만약, 이미지가 무수히 많은 웹페이지가 존재하는 경우 웹페이지가 다 로딩되기도 전에 onload 이벤트가 발생할 수도 있으며, 일반적인 경우 초기화 작업을 onload이벤트에서 처리하므로 web application에서는 치명적인 문제가 발생할 수 있다는 문제를 가지고 있었습니다.

Dean Edwards씨의 내놓은 해결책은 다음과 같습니다.
Mozilla인 경우 DOMContentLoaded를 사용하여 DOM이 모두 로딩되었는지를 확인할 수 있습니다.

// for Mozilla browsers

if (document.addEventListener) {

    document.addEventListener("DOMContentLoaded", init, false);

}

IE의 경우에는 <script>태그의 defer 속성을 사용하여 해결하였습니다. defer 속성을 사용하는 경우 DOM이 모두 로딩되기 전까지 스크립트 로딩을 연기시킬 수 있습니다.

<script defer src="ie_onload.js" type="text/javascript"></script>

그러나 다른 브라우져들이 위의 스크립트 태그를 만났을 때 defer 속성을 무시하고 script를 바로 실행할 수 있는 문제점이 있기 때문에 IE에서만 처리할 수 있는 conditional compilation과 conditional comments 사용하는 방법을 제시하고 있습니다 .

// 1. conditional compilation

/*@cc_on @*/

/*@if (@_win32)

    document.write("<script defer src=ie_onload.js><"+"/script>");

/*@end @*/

 

//2. conditional comments
<!--[if IE]><script defer src="ie_onload.js"></script><![endif]-->

※ script태그를 document.createElement로 생성한 후 setAttribute로 defer로 주는 방법도 있을 수 있지만, 동작하지 않기 때문에 외부 js파일로 처리합니다.

이외에도 comment에 여러가지 추가 solution들이 올라왔습니다. 대부분이 document의 readyState를 사용하여 DOM이 로딩되었는지를 체크하는 방법이었습니다.

/* for IE */

function statechange() {

    if (document.readyState == "interactive")

        init();

}



document.onreadystatechange = statechange;

Dean씨가 말하길~ 'readyState 속성은 document가 로드되었는지 또는 파싱되었는지 여부를 결정하는데 사용하기에는 신뢰하기 어렵다'고 하는군요.

Dean Edwards씨의 다음 기사로 An Alternative Solution으로 CSS를 사용하는 방법도 제시되어 있습니다만, CSS와 Javascript를 섞어쓰는 경우라서... 생략 ^^

출처 :
Dave Flangan : When do DOM elements become available to embedded scripts?
Dean Edwards : The window.onload Problem -Solved!
MSDN : DEFER Attribute | defer Property
Gecko DOM Reference : window.onload