JavaScript에서 DOM은 언제 준비되나요?

JavaScript의 DOM 준비 상태 이해

동적 웹 페이지로 작업할 때 적절한 시간에 작업을 실행하려면 DOM 준비 상태를 이해하는 것이 중요합니다. Prototype 및 jQuery와 같은 프레임워크는 window.onload 이벤트에 함수를 연결하는 편리한 메커니즘을 제공하지만 보다 직접적인 접근 방식이 필요한 상황도 있습니다.

DOM 준비 쿼리

프레임워크 사용에 대한 대안을 찾고 있다면 탐색할 수 있는 몇 가지 방법이 있습니다.

1. jQuery의 문서화되지 않은 "isReady" 속성:

문서화되지 않았음에도 불구하고 jQuery는 isReady라는 내부 속성을 유지합니다. 액세스할 수 있으면 DOM 준비 이벤트가 실행되었는지 여부를 나타냅니다.

<code class="javascript">if ($.isReady) {
  // DOM is ready
} else {
  // DOM is not yet ready
}</code>

이 접근 방식은 여러 jQuery 버전에서 안정적이었지만 문서화되지 않았으므로 주의해서 사용해야 합니다.

2. Document ReadyState:

문서 객체는 페이지의 로딩 상태를 반영하는 ReadyState 속성을 제공합니다.

<code class="javascript">if (document.readyState === 'complete') {
  // DOM is ready
} else {
  document.addEventListener("DOMContentLoaded", fireOnReady);
}</code>

DOMContentLoaded 이벤트를 수신하여 다음과 같은 경우 코드를 실행할 수 있습니다. 페이지가 완전히 로드되었습니다.

3. 사용자 정의 DOM 준비 확인:

브라우저 호환성이 가장 중요한 시나리오의 경우 Dustin Diaz의 코드 조각에서 영감을 받은 사용자 정의 DOM 준비 확인을 생성할 수 있습니다.

<code class="javascript">if (!/in/.test(document.readyState)) {
  // document is ready
} else {
  // document is NOT ready
}</code>

이 접근 방식은 다음 사실을 활용합니다. 로드 상태 "loading" 및 "interactive"에는 ReadyState 속성에 "in" 문자열이 포함되어 있습니다. 결과적으로, ReadyState에 "in"이 있으면 문서가 아직 준비되지 않은 것입니다.

위 내용은 JavaScript에서 DOM은 언제 준비되나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!