바닐라 JavaScript로 $(document).ready() 기능을 달성하는 방법은 무엇입니까?

$(document).ready()

업계 표준 jQuery 라이브러리는 $(document)를 제공합니다. 개발자가 DOM(문서 개체 모델)이 완전히 로드된 후 코드를 실행할 수 있도록 하는 Ready() 메서드를 사용하면 모든 요소에 액세스할 수 있고 페이지 콘텐츠를 조작할 수 있습니다. 그러나 바닐라 JavaScript로 작업할 때 이 방법의 대안은 무엇입니까?

답변:

$(document).ready()에 해당하는 jQuery가 아닌 것은 다음과 같습니다. 이벤트 리스너를 통해 달성됩니다. 다음 코드 조각은 이 기능을 구현하는 방법을 보여줍니다.

<code class="javascript">document.addEventListener("DOMContentLoaded", function() {
    // code to be executed when the DOM is fully loaded
});</code>

이 구현은 $(document).ready()와 동일한 결과를 달성하므로 개발자는 DOM이 완료된 후에만 코드를 실행할 수 있습니다.

추가 고려 사항:

document.addEventListener("DOMContentLoaded")는 DOM 준비를 기다리는 솔루션을 제공하지만 동작 측면에서 window.onload와 다릅니다. $(document).ready()는 DOM이 완료될 때까지만 기다리는 반면, window.onload는 DOM과 이미지 및 스크립트를 포함한 모든 외부 자산을 모두 기다립니다.

이전 브라우저를 위한 대안( IE8 이하):

Internet Explorer 8 이하와 같은 이전 브라우저의 경우 다음 대안을 사용할 수 있습니다.

<code class="javascript">document.onreadystatechange = function() {
    if (document.readyState === "interactive") {
        // code to be executed when the DOM is fully loaded
    }
};</code>

그 외에 대체 상태가 있다는 점에 유의하세요. "상호작용." 자세한 내용은 MDN(Mozilla 개발자 네트워크) 설명서를 참조하세요.

위 내용은 바닐라 JavaScript로 $(document).ready() 기능을 달성하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!