스카이코의 세상

문서의 로드 window.onload, load, DOMContentLoaded 본문

IT/Javascript

문서의 로드 window.onload, load, DOMContentLoaded

스카이코 2023. 1. 12. 04:15
반응형

자바스크립트는 html내의 요소들을 DOM객체를 이용하여 조작할 수 있습니다.

하지만 위에서 아래로 차례로 읽는 방식과 실행 전 에러 체크를 하지 않는 인터프리터 언어적 특성으로 인하여 자바스크립트 작성 위치에 따라서 에러를 발생하기도 합니다.

예시로 다음과 같은 코드를 들겠습니다.

<script>
const content = document.querySelector('.content')

content.innerHTML = "내용 수정"
</script>

<div class="content">
	내용
</div>

위와 같은 방식으로 코드를 작성하게 되면 const content = document.querySelector('.content') 구문에서 아직 class가 content인 태그가 만들어지기도 전에 읽게 되면서 문제가 발생하게 됩니다.

이와 같은 문제를 해결하기 위해서 window.onload를 사용할 수 있습니다.

 

onload

onload는 DOM의 standard 이벤트로 html의 로딩 완료 후 DOM트리를 만들고 이미지, 스타일시트와 같은 외부 자원도 모두 불러오는 것이 끝나면 실행됩니다.

다음과 같이 window.onoad를 오버라이딩(재정의)함으로써 사용할 수 있습니다.

<script>
window.onload = function() { 
	const content = document.querySelector('.content')

	content.innerHTML = "내용 수정"
}
</script>

<div class="content">
	내용
</div>

onload 함수는 페이지의 모든 요소들이 load되어야 호출되며 오버라이딩을 통해 사용하므로 한 페이지당 하나의 window.onload 함수만 사용할 수 있습니다. 그리고 <body onload=””> 방식으로도 사용할 수 있는데 이때 window.onload도 같이 사용한다면 window.onload는 실행이 되지 않습니다.

만약 여러개의 onload를 등록하고 싶거나 <body onload=””> 를 사용하고 싶으면 window.addEventListener(”load”, () ⇒ {}) 방식으로 사용할 수 있습니다.

<script>
window.addEventListener('load', () => {
  console.log('load1')
  const content = document.querySelector('.content')

  content.innerHTML = "load1"
})

window.addEventListener('load', () => {
  console.log('load2')
  const content = document.querySelector('.content')

  content.innerHTML = "load2"
})
</script>

<div body="console.log('body load')" class="content">
  내용
</div>

 

DOMContentLoaded

추가로 DOMContentLoaded라는 이벤트도 있습니다. 해당 이벤트는 브라우저가 HTML을 모두 읽고 DOM 트리를 완성하는 즉시 발생하며 이미지 파일이나 스타일시트 같은 기타 자원들은 기다리지 않습니다.

아래 코드에서는 DOMContentLoaded , load 가 순서대로 출력되고 내용은 load로 바뀌게 됩니다.

<script>
window.addEventListener('load', () => {
  console.log('load')
  const content = document.querySelector('.content')

  content.innerHTML = "load"
})

window.addEventListener('DOMContentLoaded', () => {
  console.log('DOMContentLoaded')
  const content = document.querySelector('.content')

  content.innerHTML = "DOMContentLoaded"
})

</script>

<div class="content">
	내용 
</div>

하지만 해당 기능은 IE8 이하에서는 작동하지 않습니다.

반응형
저작자표시 비영리 변경금지

'IT > Javascript' 카테고리의 다른 글

[Javascript] for ... in, for ... of 차이 비교  (0) 2023.03.23
typeof vs instanceof  (0) 2023.02.12
URL 인코딩 - encodeURI(), encodeURIComponent(), decodeURI(), decodeURIComponent()  (2) 2023.01.18
'IT/Javascript' Related Articles more
Comments