웹브라우저 JavaScript

문서 로딩

웹페이지를 프로그래밍적으로 제어하기 위해서는 웹페이지의 모든 요소에 대한 처리가 끝나야 한다. 이것을 알려주는 이벤트가 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을 포함한 모든 브라우저에서 지원하고 있다.

댓글

댓글 본문
작성자
비밀번호
  1. tachyon
    감사합니다
  2. JustStudy
    22016.07.13 수
    고맙습니다 3.
  3. JustStudy
    2016.07.03 일
    고맙습니다 2.
  4. 온달장군
    강좌 잘보고 갑니다. 감사합니다.
  5. 이주환
    2016. 04. 28
    잘보고갑니다.
  6. JustStudy
    고맙습니다
  7. 코딩!
    어디서 들어본 것 같은데 ㅎㅎ
    중복된 강의인듯 하네요ㅎㅎ
  8. 육점이
    감사합니다 ^^
  9. 규빈이아빠
    잘 봤습니다^^
버전 관리
egoing
현재 버전
선택 버전
graphittie 자세히 보기