在前端开发中，我们通常需要等待文档对象模型（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 是否准备就绪的简单示例：
-- -------------------- ---- ------- --------- ----- ------ ------ ---------------------- ------- ------ ---------- ----------- -------- -- -------------------- --- ---------- - --------------------------------------------- -------- -- - ---------------- -- ----- --- ---- --------- --- ----- ----------- --- - ---- - ---------------- -- ----- --- ----- ---------- - ------------------------------- -------- -- - ---------------- --------- --- ---------- --- --------- ------- -------展开代码
在这个示例中，我们首先检查文档是否还在加载中，如果是则监听 DOMContentLoaded 事件以便在 DOM 构建完成时运行代码。如果文档已经加载完毕，则直接运行代码。最后，我们还监听了 load 事件以确保所有资源都已加载。
总之，在没有使用现代 UI 框架的情况下，我们需要手动编写代码来检查 DOM 是否就绪。可以使用 document.readyState 属性或 DOMContentLoaded 和 load 事件来实现这一点。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/14689
