안녕하세요! 이번시간에는 자바스크립트의 DOMContentLoaded 이벤트에 대해 알아보겠습니다.
DOMContentLoaded 이벤트란?
- 돔트리 분석이 끝나면 발생
- 즉, 돔트리가 다 만들어진 후에 돔에 접근이 가능하기때문에, 돔이 생성되기전 돔을 조작하는 자바스크립트 코드가 실행되어 원하지 않는 결과를 내는것을 막을 수 있다.
document.addEventListener("DOMContentLoaded", ()=> {
console.log("원하는 코드 적기")
});load 이벤트와의 차이점은?
- load는 돔트리 이후 모든 리소스까지 완벽히 끝난 후 발생하는 이벤트
- DOMContentLoaded는 돔트리까지만 형성되면 발생하는 이벤트
- 즉 DOMContentLoaded 이벤트가 load이벤트보다 앞서 발생
- 로딩 측면에서 DOMContentLoaded가 우위에 있음
