DOM Content Loaded 이벤트

DOM Content Loaded 이벤트란?

브라우저는 HTML 문서를 처리하는 도중에 script태그 를 만나면, DOM트리 구성을 멈추고 script를 실행한다. 스크립트 실행이 끝난 후에애 나머지 HTML 문서를 처리한다. 그런데 이러한 상황에서 DOM 로딩이 다 되지 않았는데 DOM을 조작하는 자바스크립트 코드가 실행되면 원하는 결과를 내지 못한다.
이것에 해결책이 없을까..?🤔
바로 DOM ContentLoaded이벤트 가 해결책이다.

document.addEventListener("DOMContentLoaded",()=>{
    console.log("원하는 문구 적기")
})

돔이 생성되기전 돔을 조작하는 자바스크리브 코드가 실행되어 원하지 않는 결과를 내는것을 막을 수 있다.
DOMContentedLoaded-브라우저가 HTML을 전부 읽고 DOM 트리를 완성하는 즉시 발생합니다.이미지 파일이나 스타일시트 등의 기타 자원은 기다리지 않습니다.
Load-HTML로 DOM트리를 만드는 게 완성되었을 뿐만 아니라 이미지, 스타일시트 같은 외부 자원도 모두 불러오는 것이 끝났을때 발생합니다.
이벤트는 다음과 같은 상황에서 활용할 수 있습니다.
DOMContentLoaded-DOM이 준비된 것을 확인할 후 원하는 DOM노드를 찾아 핸들러를 등록해 인터페이스를 초기화 할 때
load- 이미지 사이즈를 확일할 때 등, 외부 자원이 로드된 후이기 때문에 스타일이 적용된 상태이므로 화면에 뿌려지는 효소의 실제 크기를 확인할 수 있음

그 외의 것들..

before load/load -사용자가 페이지를 떠날때 발생합니다.
before load- 사용자가 사이트를 떠나려 할 때, 변경되지 않은 사항들을 저장했는지 확일시켜줄때
unload- 사용자가 진짜 떠나기 전에 사용자 분석 정보를 담은 통계자료를 전송하고자 할 때

예시

<script>
        function ready(){
            alert("dom이 준비되었습니다.!");
            alert(`이미지 사이즈:${img.offsetwidth}x${img.offsetHeight}`);       
        }
      document.addEventListener("DOMContentLoaded", ready);
    </script>
    <img id="img" src="/source/ch_8/Images/title.png"/>

이와 같은 코드를 실행하였을때 DOMContententLoaded 이벤트로 인해 img가 있는데도 불구하고 이번트가 로드되기 전에 DOMTree가 완성된 시점에서 발생되므로 img의 크기는 아직 모른다.

제일 중요한것❗️

DOMContentLoaded는 Dom Tree가 완성된후 발생하는 이벤트 인데 만드는 과정중 script 태그 를 만나면 tom tree만드는 작업이 멈춘다.

DOMContentLoaded를 막지 않는 스크립트❗️

위와 같은 규칙엔 두 가지 예의사항이 있습니다.
1. async 속성이 있는 스크립트는 DOMContentLoaded를 막지 않습니다.
2. document.createElement('script')로 동적으로 생성되고 웹페이지의 추가된 스크립트는 DOMContentLoaded를 막지 않습니다.

DOMContentLoaded와 styles

외부 스타일시트는 DOM에 영향을 주지 않기 때문에 DOMContentLoaded는 외부 스타일시트가 로드되기를 기다리지 않습니다.
그런데 한 사지 예외가 있습니다. 스타일시트를 불러오는 태그 바로 다음에 스크립트가 위치하면 이 스크립트는 스타일시트가 로드되기 전까지 실행되지 않습니다.

<link type="text/css" rel="stylesheet" href="style.css">
<script>
	//이 스크립트는 위 스타일시트가 로드될 때까지 실행되지 않습니다.
    alert(getComputedStyle(document.body).marginTop);
</script>