MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/d6d7ff2e2f9c

Hubo errores de script en esta página. Mientras los editores del sitio lo solucionan, puedes ver una parte del contenido más abajo.

Traducción en curso

El evento DOMContentLoaded es disparado cuando el documento HTML ha sido completamente cargado y parseado, sin esperar hojas de estilo, images y subframes para  finalizar la carga. Un evento muy diferente - load - debería ser usado solo para detectar una carga completa de la página. Es un error increíblemente popular usar load cuando DOMContentLoaded sería mucho más apropiado, así que úsalo con cuidado.

{{ Nota }}

{{ Nota }}

Speeding up

If you want DOM to get parsed as fast as possible after the user had requested the page, some things you could do is turn your JavaScript asynchronous and to optimize loading of stylesheets which if used as usual, slow down page load due to being 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>

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0[1] 1.0 (1.7 or earlier)[1] 9.0[2] 9.0 3.1[1]
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support (Yes)[1] 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.

Etiquetas y colaboradores del documento

 Colaboradores en esta página: AlexOfSoCal, jdmgarcia, daniville
 Última actualización por: AlexOfSoCal,