当我们开发前端应用程序时，通常需要在网页加载完毕后执行一些 JavaScript 代码。jQuery 提供了方便的 $(document).ready() 方法来检测文档是否已准备就绪。然而，我们不想使用 jQuery，怎么办呢？本文将介绍一种不依赖于jQuery 的原生 JavaScript 方法来检测文档的就绪状态。
DOMContentLoaded 事件
DOMContentLoaded 是一个在文档加载完成并且 DOM 树构建完毕后触发的事件。通常情况下，该事件会比 load 事件更早触发，因为它只等待 DOM 树构建完成，而不必等待其他资源（如图片、样式表）的加载完成。利用这个事件，我们可以在文档准备就绪后执行 JavaScript 代码。
以下是使用 DOMContentLoaded 事件的示例代码：
document.addEventListener('DOMContentLoaded', function() {
// 这里是你要执行的代码
});上述代码将添加一个事件监听器，当文档加载完成并且 DOM 树构建完毕后，就会执行指定的代码块。请注意，由于该事件在 IE8 及更早版本中不支持，因此你可能需要提供一个回退方案。
readyState 属性
另一种检测文档是否准备好的方法是使用 document.readyState 属性。该属性返回当前文档的状态，它有三种可能值：
loading：文档正在加载。interactive：文档已经下载完毕并且所有需要执行的 JavaScript 代码已经下载完成，但是图片和样式表等资源还在加载中。complete：文档已经完全加载完成。
以下是使用 readyState 属性的示例代码：
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', function() {
// 这里是你要执行的代码
});
} else {
// 文档已准备就绪，直接执行代码
// 这里是你要执行的代码
}上述代码首先检查文档是否正在加载，如果正在加载则添加一个事件监听器，在文档准备就绪后执行指定的代码块。如果文档已经准备好了，则直接执行指定的代码块。
总结
本文介绍了两种方法来检测文档是否准备好。DOMContentLoaded 事件只等待 DOM 树构建完成，而不必等待其他资源的加载完成，因此比 load 事件更早触发。document.readyState 属性则可以更加精确地判断文档的就绪状态。无论选择哪种方法，都可以不依赖于 jQuery 来检测文档的就绪状态。
希望这篇文章能够帮助你更好地理解如何在没有 jQuery 的情况下检测文档的就绪状态，并且应用到你的开发工作中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/31237