DOMContentLoaded 이벤트는 최초 HTML 문서가 완전히 로드 및 파싱되었을때 발생되고, 스타일시트나 이미지 및 서브프레임 로드가 끝나기를 기다리지 않습니다. load 이벤트는 오직 모든 페이지가 완전히 로드되었을때 사용해야 합니다. DOMContentLoaded를 쓰는 것이 더 적당한 곳에 load를 사용하는 것은 상당히 일반적인 실수입니다. 주의하세요.

 

주의: Synchronous JavaScript pauses parsing of the DOM.

주의: There are also plenty of general-purpose and standalone libraries that offer cross-browser methods to detect that the DOM is ready.

Speeding up

If you want the DOM to get parsed as fast as possible after the user has requested the page, you could make your JavaScript asynchronous and optimize loading of stylesheets. If loaded as usual, stylesheets slow down DOM parsing as they're loaded in parallel, "stealing" traffic from the main html document.

General info

Specification
HTML5
Interface
Event
Bubbles
Yes
Cancelable
Yes (although specified as a simple event that isn't cancelable)
Target
Document
Default Action
None.

Properties

Property Type Description
target Read only EventTarget The event target (the topmost target in the DOM tree).
type Read only DOMString The type of event.
bubbles Read only Boolean Whether the event normally bubbles or not.
cancelable Read only Boolean Whether the event is cancellable or not.

Example

<script>
  document.addEventListener("DOMContentLoaded", function(event) {
    console.log("DOM fully loaded and parsed");
  });
</script>
<script>
  document.addEventListener("DOMContentLoaded", function(event) {
    console.log("DOM fully loaded and parsed");
  });

for(var i=0; i<1000000000; i++)
{} // this synchronous script is going to delay parsing of the DOM. So the DOMContentLoaded event is going to launch later.
</script>
function doSomething() {
    console.info("DOM loaded");
}

// `DOMContentLoaded` may fire before your script has a chance to run, so check before adding a listener
if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", doSomething);
} else {  // `DOMContentLoaded` already fired
    doSomething();
}

Specifications

https://html.spec.whatwg.org/#the-end:event-domcontentloaded

Specification Status Comment
HTML Living Standard
The definition of 'DOMContentLoaded' in that specification.
Living Standard  
HTML5
The definition of 'DOMContentLoaded' in that specification.
Recommendation  

Browser compatibility

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

  
Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0[1] (Yes) 1.0 (1.7 or earlier)[1] 9.0[2] 9.0 3.1[1]
  
Feature Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support (Yes)[1] (Yes) 1.0 (1)[1] ?[2] (Yes) (Yes)[1]

[1] Bubbling for this event is supported by at least Gecko 1.9.2, Chrome 6, and Safari 4.

[2] Internet Explorer 8 supports the readystatechange event, which can be used to detect when the DOM is ready. In earlier versions of Internet Explorer, this state can be detected by repeatedly trying to execute document.documentElement.doScroll("left");, as this snippet will throw an error until the DOM is ready.

문서 태그 및 공헌자

이 페이지의 공헌자: ExE-Boss, project42da
최종 변경자: ExE-Boss,