Manlikeakin의 JavaScript 챌린지, 93일차: DOM: DOMContentLoaded.

와우.. 다음주 이맘때쯤 챌린지 끝!

DOMContentLoaded 는   이미지 및 스타일시트가 로드를 완료할 때까지 기다리지 않고 DOM 콘텐츠가 로드될 때 실행됩니다.

페이지 헤드에 JavaScript를 배치하지만 본문의 요소를 참조하는 경우 DOMContentLoadedevent 를 처리해야 합니다  . 예를 들면 다음과 같습니다.

이 예에서는 head  의 JavaScript에서  본문 의 버튼을 참조합니다  .

자바스크립트 엔진 이 헤드에서 자바스크립트를 파싱 할 때 DOM이 로드되지 않았기 때문에 id가 btn인 버튼이 존재하지 않습니다.

이 문제를 해결하려면 다음과 같이 코드를  DOMContentLoaded  이벤트 핸들러 안에 배치합니다.

헤더에 JavaScript를 배치하면 병목 현상과 렌더링 지연이 발생하므로  </body> 태그 앞에 스크립트를 이동하는 것이 좋습니다 . 이 경우 다음과 같이 코드를 DOMContentLoaded  이벤트 에 배치할 필요가 없습니다  .

요약

DOMContentLoaded 이벤트 는   이미지와 스타일시트가 로드를 완료할 때까지 기다리지 않고 DOM 콘텐츠가 로드될 때 발생합니다.

 본문 섹션의 요소를 참조하는 헤드에 JavaScript 코드를 배치하는 경우 에만  DOMContentLoaded 이벤트를 처리합니다.

읽어 주셔서 감사합니다!