[JavaScript] DOMContentLoaded

DOMContentLoaded 이벤트란?

DOMContentLoaded 이벤트는 웹 페이지가 완전히 로드되고 파싱되었을 때 발생하는, 웹 브라우저에서 제공하는 이벤트 중 하나입니다. 이 이벤트는 모든 HTML이 완전히 로드되고 DOM 트리가 구축되었을 때 발생하지만, CSS 스타일시트, 이미지, 프레임 로딩은 기다리지 않습니다.

 

사용하는 이유

이 이벤트를 사용하는 주된 이유는 JavaScript 코드가 문서의 요소들을 안전하게 조작하고 접근할 수 있도록 보장하기 위함입니다. DOMContentLoaded 이벤트가 발생하기 전에 JavaScript 코드가 실행되면, 아직 DOM이 완성되지 않아 예상치 못한 오류가 발생할 수 있습니다.

 

기본 사용법

JavaScript에서는 document.addEventListener 메소드를 사용하여 DOMContentLoaded 이벤트 리스너를 추가할 수 있습니다

document.addEventListener("DOMContentLoaded", function() {
    // DOM이 완전히 로드되었을 때 실행할 코드
});

 

 

HTML과 JavaScript 파일 로딩

일반적으로 HTML 문서 안에서 <script> 태그를 사용하여 JavaScript 파일을 불러옵니다. 이 때, <script> 태그가 문서의 상단에 위치하면 JavaScript 파일이 로드되는 동안 HTML 파싱이 중단됩니다. 그러나 DOMContentLoaded 이벤트를 사용하면, 스크립트 로딩과 실행이 HTML 파싱을 방해하지 않고, DOM이 완전히 구성된 후에 안전하게 스크립트를 실행할 수 있습니다.