문서로딩
문서의 로딩이란 자바스크립트를 실행할 때 어떤 타이밍에 실행을 해야지만 문서에 있는 엘레먼트들에게 문제 없이 명령을 실행할 수 있는가와 관련이 있습니다.
<head>
<script>
var t = document.getElementById('target');
console.log(t);
</script>
</head>
<body>
<p id="target">Hello</p>
</body>위 코드를 실행시켜보면 콘솔창에는 null이 출력이 됩니다. 브라우저는 위에서부터 아래로 코드를 실행시켜 나갑니다. 하지만 작성한 코드에서는 javascript코드가 먼저 실행이 되었기 때문에 null이 출력되는 것입니다.
이를 해결하기 위해서는 script를 p태그 호출 후로 옮길 수도 있지만, window의 전역객체의 이벤트 타입중에 onload라는 이벤트를 이용해 해결할 수도 있습니다.
window.onload()
onload이벤트는 웹페이지 전체가 브라우저에서 위에서 해석이 다 끝나고 body태그 안쪽의 img, script, 다운로드 리소스까지 모두 끝났을 때 실행이 됩니다.
<head>
<script>
window.onload = function () {
var t = document.getElementById('target');
console.log(t);
}
</script>
</head>
<body>
<p id="target">Hello</p>
</body>onload코드는 아래와 같이 수정할 수 있습니다.
window.addEventListener('load', function () {
var t = document.getElementById('target');
console.log(t);
})하지만 만약 img등의 다운로드 리소스의 용량이 너무 커서 다운로드가 오래 걸린다면 다운로드가 완료될 때까지 onload이벤트의 실행은 지연되게 됩니다.
이 때 사용할 수 있는 이벤트가 바로 DOMContentLoaded입니다.
DOMContentLoaded()
onload()이벤트가 HTML로 DOM 트리를 만드는 게 완성되었을 뿐만 아니라 이미지, 스타일시트 같은 외부 자원도 모두 불러오는 것이 끝났을 때 실행된다면 DOMContentLoaded()이벤트의 경우 브라우저가 HTML을 전부 읽고 DOM 트리를 완성하는 즉시 발생합니다. 이미지 파일(<img>)이나 스타일시트 등의 기타 자원은 기다리지 않습니다.
또한 DOMContentLoaded 이벤트는 document 객체에서 발생하기 때문에 이 이벤트를 다루려면 addEventListener를 사용해야 합니다.
