DOMContentLoaded 이벤트

• 4/13/2023
• 2 minutes to read

DOMContentLoaded 이벤트는 HTML 문서가 완전히 로드되고 파싱되었을 때 발생하는 이벤트입니다. 이 이벤트는 외부 리소스(이미지, 스타일 시트 등)의 로드를 기다리지 않으며, HTML 문서의 DOM 트리가 완전히 구성된 시점에 발생합니다. 이를 통해 개발자들은 페이지의 초기화 코드를 실행하거나, DOM 조작을 수행하는 등의 작업을 할 수 있습니다.

사용법

DOMContentLoaded 이벤트는 다음과 같이 사용할 수 있습니다.

document.addEventListener("DOMContentLoaded", function() {
  // 페이지 초기화 코드를 여기에 작성합니다.
});

예제

document.addEventListener("DOMContentLoaded", function() {
  console.log("HTML 문서가 로드되고 파싱되었습니다.");
  // DOM 조작 및 초기화 코드를 작성할 수 있습니다.
});

위 예제에서는 DOMContentLoaded 이벤트가 발생했을 때 콘솔에 메시지를 출력합니다. 이를 통해 HTML 문서가 완전히 로드되고 파싱되었음을 확인할 수 있습니다.

주의사항

• DOMContentLoaded 이벤트는 외부 리소스의 로드를 기다리지 않습니다. 따라서 이미지, 스타일 시트 등의 리소스를 기다려야 하는 경우에는 window.onload 이벤트를 사용해야 합니다.
• 이미 DOMContentLoaded 이벤트가 발생한 후에 이벤트 리스너를 추가하면, 이벤트 리스너가 실행되지 않습니다. 이 경우, 코드를 즉시 실행하거나 window.onload 이벤트를 사용할 수 있습니다.