반응형
38. 문서 로딩
웹페이지를 프로그래밍적으로 제어하기 위해서는 웹페이지의 모든 요소에 대한 처리가 끝나야 한다. 이것을 알려주는 이벤트가 load, DOMContentLoaded이다.
아래 코드의 실행결과는 null이다. <p id="target">Hello</p>가 로딩되기 전에 자바스크립트가 실행되었기 때문이다.
<html>
<head>
<script>
var t = document.getElementById('target');
console.log(t);
</script>
</head>
<body>
<p id="target">Hello</p>
</body>
</html>
이를 해결하기 위한 방법은 아래와 같이 스크립트를 문서 끝에 위치시키는 것이다.
<p id="target">Hello</p>
<script>
var t = document.getElementById('target');
console.log(t);
</script>
또 다른 방법은 load 이벤트를 이용하는 것이다.
<head>
<script>
window.addEventListener('load', function(){
var t = document.getElementById('target');
console.log(t);
})
</script>
</head>
<body>
<p id="target">Hello</p>
</body>
그런데 load 이벤트는 문서내의 모든 리소스(이미지, 스크립트)의 다운로드가 끝난 후에 실행된다. 이것을 에플리케이션의 구동이 너무 지연되는 부작용을 초래할 수 있다.
DOMContentLoaded는 문서에서 스크립트 작업을 할 수 있을 때 실행되기 때문에 이미지 다운로드를 기다릴 필요가 없다.
<html>
<head>
<script>
window.addEventListener('load', function(){
console.log('load');
})
window.addEventListener('DOMContentLoaded', function(){
console.log('DOMContentLoaded');
})
</script>
</head>
<body>
<p id="target">Hello</p>
</body>
</html>
DOMContentLoaded 이벤트는 IE9을 포함한 모든 브라우저에서 지원하고 있다.
'프로그래밍 > 자바스크립트' 카테고리의 다른 글
| 생활코딩 javascript 정리 - 네트워크 통신 - Ajax (0) | 2017.09.10 |
|---|---|
| 생활코딩 javascript 정리 - jQuery on API 사용법 (0) | 2017.09.03 |
| 생활코딩 javascript 정리 - jQuery 이벤트 vs 자바스크립트 이벤트 (0) | 2017.09.02 |
| 생활코딩 javascript 정리 - 마우스 이벤트 (0) | 2017.08.28 |
| 생활코딩 javascript 정리 - 이벤트 타입 폼(form) (0) | 2017.08.20 |
| 생활코딩 javascript 정리 - 기본동작의 취소 (0) | 2017.08.15 |
| 생활코딩 javascript 정리 - 이벤트 등록방법(inline) (0) | 2017.08.13 |
| 생활코딩 javascript 정리 - 이벤트 (0) | 2017.08.09 |