Javascript에서 DOM이 준비되기를 기다리는 중

Javascript에서 DOM이 준비되기를 기다리는 중

2022-10-19 last update

7 minutes reading javascript beginners typescript webdev
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>


ID가 #button인 버튼이 있더라도 이 코드는 실제로 오류를 발생시킵니다. 그 이유는 Javascript가 DOM보다 먼저 로드되기 때문입니다. 따라서 #button에 대한 선택을 쿼리하려고 하면 null이 반환됩니다.

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


이것은 DOM 준비와 관련된 매우 일반적인 문제입니다. HTML DOM이 로드되지 않았으므로 Javascript를 적용할 준비가 되지 않았습니다.

DOM이 자바스크립트에서 준비될 때까지 기다리기



HTML이 로드될 때까지 기다리려면 Javascript가 실행되기 전에 DOMContentLoaded 를 사용해 보십시오. 다음과 같이 이 이벤트 리스너에서 전체 자바스크립트를 래핑할 수 있습니다.

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


이제 DOMContentLoaded 이벤트 리스너 내의 코드는 HTML이 실행된 후에만 실행되므로 코드에서 오류가 생성되지 않습니다. 즉, HTML 이전에 Javascript를 계속 사용할 수 있으며 문제가 발생하지 않습니다. 물론 HTML 뒤에 자바스크립트를 추가하여 이 문제를 해결할 수도 있지만 항상 가능한 것은 아닙니다.

DOM Readiness 및 Javascript DOMContentLoaded에 대한 이 빠른 가이드를 즐겼기를 바랍니다.