Краткое руководство о том, как можно дождаться готовности 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 . Заинтересованы в хакинге роста? Ознакомьтесь с разделом Схема.