[JS 개념] DOMContentLoaded

DOMContentLoaded

: DOM트리가 완성되면 바로 실행된다. (스타일 시트, 이미지, 하위 프레임의 로딩을 기다리지 않음)

window.addEventListener('DOMContentLoaded', (event) => {
	//실행될 코드
});

 

=> 장점 : onload 이벤트보다 먼저 발생함. 빠른 실행속도가 필요할 때 적합하다.

                 *onload : 문서의 모든 자원이 다운로드 되었을 때 발생

문서의 로드

<예시>

window.addEventListener('DOMContentLoaded',()=>{
    const item = reviews[currentItem];
    img.src = item.img;
    author.textContent = item.name;
    job.textContent = item.job;
    info.textContent = item.text;
});

 

(참조) https://valuefactory.tistory.com/548

           https://developer.mozilla.org/ko/docs/Web/API/Window/DOMContentLoaded_event

 

---

1st 기록 : 23.05.10(수)