Javascript에서 DOM이 준비되기를 기다리는 중
<!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를 적용할 준비가 되지 않았습니다.
Javascript에서 DOM이 준비되기를 기다리는 중
Javascript가 실행되기 전에 HTML이 로드될 때까지 기다리려면
DOMContentLoaded 를 사용해 보십시오. 다음과 같이 이 이벤트 리스너에서 전체 Javascript를 래핑할 수 있습니다.window.addEventListener('DOMContentLoaded', () => {
document.querySelector('#button').addEventListener('click', () => {
console.log('You clicked me!')
});
});
이제
DOMContentLoaded 이벤트 리스너 내의 코드는 HTML이 실행된 후에만 실행되므로 코드에서 오류가 생성되지 않습니다. 즉, HTML보다 Javascript를 계속 사용할 수 있으며 문제가 발생하지 않습니다. 물론 HTML 뒤에 자바스크립트를 넣어 이 문제를 해결할 수도 있지만 항상 가능한 것은 아닙니다.Javascript에서 DOM 준비 및
DOMContentLoaded에 대한 이 빠른 가이드를 즐겼기를 바랍니다.
Reference
이 문제에 관하여(Javascript에서 DOM이 준비되기를 기다리는 중), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/smpnjn/waiting-for-the-dom-to-be-ready-in-javascript-42l7텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
