프레임워크 없이 DOM 준비 이해

웹 애플리케이션을 개발할 때 DOM(문서 개체 모델)을 조작할 준비가 되었는지 결정하는 것이 중요합니다. jQuery와 같은 프레임워크는 ReadyState 리스너를 제공하지만 이 문서에서는 DOM 준비 상태를 감지하는 대체 접근 방식을 살펴봅니다.

DOM 상태에 직접 액세스

프레임워크에 의존하는 대신 다음을 직접 수행할 수 있습니다. document'sreadyState 속성을 확인하세요:

if (document.readyState === 'complete') {
  // DOM is ready
}

그러나 이 접근 방식은 일부 브라우저에서 정확한 ReadyState 값을 제공하지 않을 수 있으므로 여러 브라우저에서 신뢰할 수 없습니다.

이벤트 기반 DOM 준비 확인

브라우저 간 접근 방식은 DOM이 준비될 때 발생하는 DOMContentLoaded 이벤트를 수신하는 것입니다. 조작:

function fireOnReady() {
  // ...
}
if (document.readyState === 'complete') {
  fireOnReady();
} else {
  document.addEventListener("DOMContentLoaded", fireOnReady);
}

문서화되지 않은 jQuery의 isReady 속성 활용

문서화되지는 않았지만 jQuery는 내부적으로 DOM 준비 상태를 나타내는 isReady 속성을 노출합니다.

if ($.isReady) {
  // DOM is ready
} else {
  // DOM is not yet ready
}

경량 DOM 지원 스니펫

Dustin Diaz의 스니펫에서 영감을 받아 다음과 같이 미니 DOM 지원 리스너를 만들 수 있습니다.

if (!/in/.test(document.readyState)) {
  // Document is ready
} else {
  // Document is not ready
}

이 검사는 이전 로드 상태에서 ReadyState 값에 "in"이 포함되어 있다는 사실을 활용하여 DOM 준비 상태를 신뢰할 수 있는 지표로 만듭니다.