JavaScript 什么是$(document).ready的等效物

jQuery函数 “ $(document).ready() ” 确保代码仅在DOM完全加载后执行，以防止不恰当的修改。它使事件绑定、安全的DOM元素交互和DOM相关代码的执行成为可能。它确保代码在适当的时候执行，以防止因无法访问的部分而造成的错误。本文将介绍在不使用jQuery的情况下获得$(document).ready的等效物，并通过示例来理解它们的基本实现。

当使用jQuery不可行时，我们想要在不使用jQuery的情况下得到相同的结果，那么我们可以使用两种方法

使用“DOMContentLoaded”事件的一种方法。此外，我们可以将该事件添加到 document 或 window 上。
第二种方法是将脚本标签放在HTML body结束前，就在闭合的</body>标签前。

我们将探讨这两种方法，并通过示例来理解它们。

方法1： 第一种方法是使用 DOMContentLoaded 事件，在此事件中我们可以同时使用 window 和 document 。不需要等待样式表、图形或子框架完全加载，一旦基本的HTML内容加载并解析完毕，就会触发 DOMContentLoaded 事件。因此，它给我们提供了与 $(document).ready() 在jQuery中提供的相同类型的功能。

语法：

document.addEventListener("DOMContentLoaded", function() {  
    // Code to be executed when the DOM is ready  
});   

// Or we can also use this event in this way  
window.addEventListener("DOMContentLoaded", function() {     
    // Code to be executed when the DOM is ready     
});

示例： 本示例演示了如何使用 DOMContentLoaded 事件来实现第一种方法，这种方法可以使用文档和窗口。在这里，演示了当我们将DOMContentLoaded事件与文档一起添加时，当DOM加载完成时，脚本会被执行。

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <script> 
  
        //When the DOMContentLoaded event is not  
        // used, the script is like this 
        // This will not be executed 
        document.addEventListener("DOMContentLoaded",  
        function () { 
  
            // Code to be executed when the DOM is ready 
            var heading = document.getElementById("myHeading"); 
            heading.textContent = "DOM is ready!"; 
        }); 
    </script> 
</head> 
  
<body> 
    <h1 style="color: green;"> 
        GeeksforGeeks 
    </h1> 
      
    <h3>$(document).ready equivalent without jQuery</h3> 
      
    <h1 id="myHeading">Waiting for DOM...</h1> 
</body> 
  
</html>

输出:

JavaScript 什么是$(document).ready的等效物

方法2： 第二种方法确保在所有HTML内容被加载和解析后，在脚本标签内运行JavaScript代码，将 <script>标签紧密放置在HTML body的结束标签 </body>之前。代码将以此方式访问所有DOM元素。

示例： 下面的代码示例演示了如何实现第二种方法。该代码展示了如何使用此方法模仿 $(document).ready() 而不使用 DOMContentLoaded事件的功能。

HTML

<!DOCTYPE html> 
<html> 
  
<body> 
    <h1 style="color: green;"> 
        GeeksforGeeks 
    </h1> 
  
    <h3> 
        $(document).ready equivalent without jQuery 
    </h3> 
      
    <strong style="color: sienna;  
                   margin: 2rem;" id="myText"> 
        DOM not loaded yet... 
    </strong> 
    <br> 
      
    <strong style="color: sienna;  
               margin-left: 2rem;" id="myText2"> 
    </strong> 
      
    <script> 
        var text = document.getElementById("myText"); 
        var text2 = document.getElementById("myText2"); 
        text.textContent = 
            "In this code same result is achieved using"; 
        text2.textContent = "Using the second aprroach!"; 
    </script> 
</body> 
  
</html>