如何在没有框架的情况下检查DOM是否已经就绪？-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们通常需要等待文档对象模型（DOM）加载完毕才能执行 JavaScript 代码。如果脚本试图访问尚未加载的 DOM 元素，将会导致错误。现代 UI 框架通常提供了方便的方法来处理这种情况，但是在没有框架的情况下，我们需要手动编写代码来检查 DOM 是否就绪。

检查DOM的状态

DOM 有三种加载状态：loading、interactive 和 complete。当浏览器开始加载 HTML 文档时，它首先将其解析为 DOM 树，在此期间我们称之为 loading 阶段。当 DOM 树构建完成，但所有资源如图像和样式表还未加载完毕时，我们称之为 interactive 阶段。最后，当所有资源都已加载并且 DOM 已准备好时，我们称之为 complete 阶段。

我们可以使用 document.readyState 属性来检查当前 DOM 的加载状态。该属性的值分别为 "loading", "interactive" 和 "complete"。

if (document.readyState === 'loading') {
  console.log('Document is still loading.');
} else if (document.readyState === 'interactive') {
  console.log('Document is ready but some resources are still loading.');
} else if (document.readyState === 'complete') {
  console.log('Document is fully loaded and ready to be used.');
}

监听DOMContentLoaded事件

另一种检查 DOM 是否准备就绪的方法是使用 DOMContentLoaded 事件。该事件在 DOM 树构建完成后立即触发，但此时仍可能存在未加载的资源。

document.addEventListener('DOMContentLoaded', function () {
  console.log('DOM is ready and fully loaded.');
});

可以看到，在监听 DOMContentLoaded 事件时，我们可以直接运行代码，而不必等待所有资源加载完毕。

监听load事件

如果需要确保所有资源都已加载完毕，可以使用 window.load 事件。该事件在所有资源都已加载完成时触发，包括图像和嵌入式框架等资源。

window.addEventListener('load', function () {
  console.log('All resources are loaded.');
});

实践示例

下面是一个演示如何使用上述技术来检查 DOM 是否准备就绪的简单示例：

<!DOCTYPE html>
<html>
<head>
  <title>Example</title>
</head>
<body>
  <h1>Hello, world!</h1>

  <script>
    if (document.readyState === 'loading') {
      document.addEventListener('DOMContentLoaded', function () {
        console.log('DOM is ready but some resources are still loading.');
      });
    } else {
      console.log('DOM is ready and fully loaded.');
    }

    window.addEventListener('load', function () {
      console.log('All resources are loaded.');
    });
  </script>
</body>
</html>

在这个示例中，我们首先检查文档是否还在加载中，如果是则监听 DOMContentLoaded 事件以便在 DOM 构建完成时运行代码。如果文档已经加载完毕，则直接运行代码。最后，我们还监听了 load 事件以确保所有资源都已加载。

总之，在没有使用现代 UI 框架的情况下，我们需要手动编写代码来检查 DOM 是否就绪。可以使用 document.readyState 属性或 DOMContentLoaded 和 load 事件来实现这一点。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/14689