웹브라우저 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. 헤밍웨이
    window.onload()만 알고 있었는데 다양한 기능들이 있었군요!
  2. 임앤강
    2022-02-17 감사합니다~~
  3. 드림보이
    2021.12.31. 이벤트 타입 - 문서 로딩 파트 수강완료
  4. pmxsg
    2021.12.23.수강
  5. labis98
    20210914 좋은 강의 감사합니다.
  6. anne
    완료
  7. 정승옥
    완료
  8. 한강
    완료했습니다~~!!!^^
    200713
  9. Joo.Love.
    비교 분석해 주셔서 더 쏙쏙 이해가 잘 됩니다. 감사합니다.
  10. 굼벵이
    완료
  11. seokhyun
    <html>
    <head>
    <script>
    window.addEventListener('load', function(){
    console.log('load');
    var t = document.getElementById('target');
    console.log(t);
    })

    // 이미지 같은것은 제외하기 때문에 먼저 실행 시간단축
    window.addEventListener('DOMContentLoaded', function(){
    console.log('DOMContentLoaded');
    var t = document.getElementById('target');
    console.log(t);
    })
    </script>
    </head>
    <body>
    <p id="target">Hello</p>
    <img src="https://www.google.co.kr/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="">
    </body>
    </html>
    대화보기
    • JuicyFresh
      감사합니다.
    • 생선과고양이
      20180504 감사합니다
    • 열정을가진
      감사합니다
    • 박인호
      1-3
      수강완료.
    • crable
      감사합니다.
    • Byeong Heon Lee
      항상 감합니다~
    • 신입1
      감사합니다
    • ckocko
      이 둘은 매개변수로 event를 가지지 않나요? 아니면 누락됐어도 알아서 처리가 되는건가요?
    • tachyon
      감사합니다
    • JustStudy
      22016.07.13 수
      고맙습니다 3.
    • JustStudy
      2016.07.03 일
      고맙습니다 2.
    • 온달장군
      강좌 잘보고 갑니다. 감사합니다.
    • 이주환
      2016. 04. 28
      잘보고갑니다.
    • JustStudy
      고맙습니다
    • 코딩!
      어디서 들어본 것 같은데 ㅎㅎ
      중복된 강의인듯 하네요ㅎㅎ
    • 육점이
      감사합니다 ^^
    • 규빈이아빠
      잘 봤습니다^^
    버전 관리
    egoing@gmail.com
    현재 버전
    선택 버전
    graphittie 자세히 보기