The DOMContentLoaded event fires when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.

A different event, load, should be used only to detect a fully-loaded page. It is a very common mistake to use load where DOMContentLoaded would be much more appropriate, so be cautious.

Optimize parsing speed

Synchronous JavaScript pauses parsing of the DOM. If you want the DOM to get parsed as fast as possible after the user has requested the page, you can 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

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


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.


Basic usage

  document.addEventListener("DOMContentLoaded", function(event) {
    console.log("DOM fully loaded and parsed");

Delaying DOMContentLoaded

  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.

Checking whether loading is already complete

DOMContentLoaded may fire before your script has a chance to run, so it is wise to check before adding a listener.

function doSomething() {"DOM loaded");

if (document.readyState === "loading") {  // Loading hasn't finished yet
  document.addEventListener("DOMContentLoaded", doSomething);
} else {  // `DOMContentLoaded` has already fired


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

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.

See also