JavaScript DOM content load check
DOM loading is an important event, sometimes you have some logic which takes DOM into consideration so knowing exactly when DOM has been loaded fully is the crucial info. DOM corresponds to Document Object Model.
we all know that anything which is put onside the
<script></script>
tags will be executed instantly as soon as the script is downloaded to browser. So any logic which is based on not fully loaded DOM will go result in a crash or wrong outcome. So to resolve this its better to wait until the DOM tree is fully ready.
So, to wait on the DOM event, add an event listener to the document object. The name of the event is
DOMContentLoaded
The event listener will make sure that all we have to make sure DOM tree is loaded fully into the memory so that any logic accessing DOM items will not results in any kind of error.
DOMContentLoaded
event fires when HTML content has been loaded completely without loading the CSS files, referred images etc which takes a major chunk of loading time for a page.
Basic usage:
window.addEventListener('DOMContentLoaded', (event) => {
console.log('DOM fully loaded and parsed');
});
Example:
<html>
<head>
<script type="text/javascript">
function DOMReadyCheck() {
alert("DOM is ready");
}
document.addEventListener("DOMContentLoaded", DOMReadyCheck);
</script>
</head>
</html>
Happy Coding!
You may check Web APIs at Mozilla Developer Documentation