Краткое руководство о том, как можно дождаться готовности DOM в JavaScript, используя DOMContentLoaded.

Когда вы работаете с JavaScript, вы, вероятно, сталкивались с довольно распространенной проблемой: если ваш JavaScript появляется перед вашим HTML, то попытки делать такие вещи, как присоединение событий к вашему HTML, невозможны. Например, рассмотрим этот код:

<!DOCTYPE HTML>
<html>
    <head>
        <script type="text/javascript">
            document.querySelector('#button').addEventListener('click', () => {
                console.log('You clicked me!')
            });
        </script>
    </head>
    <body>
        <button id="button">Click Me</button>
    </body>
</html>

Несмотря на то, что есть кнопка с идентификатором #button, этот код фактически выдает ошибку. Причина в том, что JavaScript загружается раньше DOM. Поэтому попытка запроса select для #button возвращает null:

Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
    at file.html:5:46

Это довольно распространенная проблема, связанная с готовностью DOM — ваш HTML DOM не загружен — поэтому он не готов к применению к нему Javascript.

Ожидание готовности DOM в Javascript #

Если вы хотите дождаться загрузки HTML, прежде чем запустится ваш Javascript, попробуйте использовать DOMContentLoaded. Мы можем обернуть весь наш Javascript в этот прослушиватель событий следующим образом:

window.addEventListener('DOMContentLoaded', () => {
    document.querySelector('#button').addEventListener('click', () => {
        console.log('You clicked me!')
    });
});

Теперь в вашем коде не будет возникать ошибок, поскольку код в прослушивателе событий DOMContentLoaded сработает только после запуска HTML. Это означает, что вы можете по-прежнему использовать свой Javascript перед HTML и не сталкиваться с проблемами. Конечно, вы также можете решить эту проблему, поместив свой Javascript после вашего HTML, но это не всегда возможно.

Надеюсь, вам понравилось это краткое руководство по готовности к DOM и DOMContentLoaded в JavaScript.

🙇‍♂️ Если вам это нравится, поддержите меня на Patreon

Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord . Заинтересованы в хакинге роста? Ознакомьтесь с разделом Схема.