Готовность 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.
Также опубликовано здесь
Оригинал