The documentLoad event and the DOMContentLoaded event are both fired when the DOM tree is completely loaded, but they occur at different points in time.
The documentLoad event is triggered when the entire document has been finished loading, including all images, scripts, stylesheets, and external resources. It fires when the browser has finished parsing the HTML and all subframes have finished loading.
window.addEventListener('documentLoad', function() {
console.log('The document is now loaded!');
});
On the other hand, the DOMContentLoaded event is triggered when the DOM tree has been completely loaded and parsed, but not necessarily all resources have finished loading. This means that all elements in the HTML have been parsed and are available to manipulate, but external resources such as images and scripts may still be loading.
window.addEventListener('DOMContentLoaded', function() {
console.log('The DOM tree is now loaded!');
});
In general, it's a good practice to use the DOMContentLoaded event instead of the documentLoad event because it allows you to start manipulating the DOM as soon as the elements are available, without waiting for all external resources to finish loading.