Готовность DOM в Javascript

20 октября 2022 г.

Когда вы работаете с 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.

Также опубликовано здесь

Оригинал

Готовность DOM в Javascript

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

Recent Post

8 шагов к внедрению микроформления в реагирование с Still.js

По -прежнему.

Используйте бесконечность, а не в петлях Python

В автономном первом JavaScript для космических миссий: как процветает JS в средах с низкой связью.

Новый выпуск Biome предлагает более быструю лининг с типовой точностью

Categories