JavaScript DOMContentLoaded Event

Summary: in this tutorial, you will learn about the JavaScript DOMContentLoaded event.

The DOMContentLoaded fires when the DOM content is loaded, without waiting for images and stylesheets to finish loading.

You need to handle the DOMContentLoaded event when you place the JavaScript in the head of the page but referencing elements in the body, for example:

<!DOCTYPE html>
<html>

<head>
    <title>JS DOMContentLoaded Event</title>
    <script>
        let btn = document.getElementById('btn');
        btn.addEventListener('click', (e) => {
            // handle the click event
            console.log('clicked');
        });
    </script>
</head>

<body>
    <button id="btn">Click Me!</button>
</body>

</html>
Code language: HTML, XML (xml)

In this example, we reference the button in the body from the JavaScript in the head.

Because the DOM has not been loaded when the JavaScript engine parses the JavaScript in the head, the button with the id btn does not exist.

To fix this, you place the code inside an DOMContentLoaded event handler, like this:

<!DOCTYPE html>
<html>

<head>
    <title>JS DOMContentLoaded Event</title>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            let btn = document.getElementById('btn');
            btn.addEventListener('click', () => {
                // handle the click event
                console.log('clicked');
            });
        });
    </script>
</head>

<body>
    <button id="btn">Click Me!</button>
</body>

</html>
Code language: HTML, XML (xml)

When you place JavaScript in the header, it will cause bottlenecks and rendering delays, so it’s better to move the script before the </body> tag. In this case, you don’t need to place the code in the DOMContentLoaded event, like this:

<!DOCTYPE html>
<html>

<head>
    <title>JS DOMContentLoaded Event</title>
</head>

<body>
    <button id="btn">Click Me!</button>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            let btn = document.getElementById('btn');
            btn.addEventListener('click', () => {
                // handle the click event
                console.log('clicked');
            });
        });
    </script>
</body>
</html>
Code language: HTML, XML (xml)

Summary

The DOMContentLoaded event fires when the DOM content is loaded, without waiting for images and stylesheets to finish loading.
Only handle DOMContentLoaded event if you place the JavaScript code in the head, which references elements in the body section.

Was this tutorial helpful ?