Událost DOM Content Loaded

Chceme v prohlížeči spoustit Javascriptový kód až po tom, co se načte celá stránka, je zparsována a DOM strom je kompletně vytvořen. Jakákoliv práce, procházení a manipulace s DOM totiž vyžaduje, aby byl element v DOM dostupný. Pokud bychom s prvky manipulovali dříve, než jsou vytvořeny v DOM stromě mohli bychom způsobit chyby v aplikaci.

K tomuto účelu je vhodné mít v prohlížeči událost, která se spouští až poté, co je kompletní DOM strom vytvořen a můžeme si být jisti, že prvky na stránce jsou připraveny pro manipulaci. Touto událostí je DOMContentLoaded.

document.addEventListener("DOMContentLoaded", function() {
	// kód pro manipulaci s prvky stránky
	alert("DOM byl načten :)");
});

Listener poslouchá na dokumentu na událost DOMContentLoaded, která pak vyvolá a spustí kód uvnitř funkce.

onLoad

K podobnému učelu máme i event window.onload. který se spouští až poté, co byly načteny všechny prvky stránky, včetně obrázků, stylů a dalšího obsahu, jako jsou například iframe nebo reklamy. Na druhé straně, DOMContentLoaded se spouští, když jsou načteny pouze HTML a DOM strom je kompletní, ale mohou stále být načítány externí soubory, jako jsou obrázky nebo styly. To znamená, že tato událost se spustí dříve než window.onload a může být užitečná pro spouštění kódu, který ovládá pouze HTML a DOM, například změny stylů, přidání interaktivních prvků nebo načtení dat ze serveru.