在前端开发中，我们通常需要等待文档对象模型（DOM）加载完毕才能执行 JavaScript 代码。如果脚本试图访问尚未加载的 DOM 元素，将会导致错误。现代 UI 框架通常提供了方便的方法来处理这种情况，但是在没有框架的情况下，我们需要手动编写代码来检查 DOM 是否就绪。
检查DOM的状态
DOM 有三种加载状态：loading、interactive 和 complete。当浏览器开始加载 HTML 文档时，它首先将其解析为 DOM 树，在此期间我们称之为 loading 阶段。当 DOM 树构建完成，但所有资源如图像和样式表还未加载完毕时，我们称之为 interactive 阶段。最后，当所有资源都已加载并且 DOM 已准备好时，我们称之为 complete 阶段。
我们可以使用 document.readyState 属性来检查当前 DOM 的加载状态。该属性的值分别为 "loading", "interactive" 和 "complete"。
-- -------------------- --- ---------- - --------------------- -- ----- ----------- - ---- -- -------------------- --- -------------- - --------------------- -- ----- --- ---- --------- --- ----- ----------- - ---- -- -------------------- --- ----------- - --------------------- -- ----- ------ --- ----- -- -- -------- -
监听DOMContentLoaded事件
另一种检查 DOM 是否准备就绪的方法是使用 DOMContentLoaded 事件。该事件在 DOM 树构建完成后立即触发，但此时仍可能存在未加载的资源。
--------------------------------------------- -------- -- - ---------------- -- ----- --- ----- ---------- ---
可以看到，在监听 DOMContentLoaded 事件时，我们可以直接运行代码，而不必等待所有资源加载完毕。
监听load事件
如果需要确保所有资源都已加载完毕，可以使用 window.load 事件。该事件在所有资源都已加载完成时触发，包括图像和嵌入式框架等资源。
------------------------------- -------- -- - ---------------- --------- --- ---------- ---
实践示例
下面是一个演示如何使用上述技术来检查 DOM 是否准备就绪的简单示例：
--------- -----
------
------
----------------------
-------
------
---------- -----------
--------
-- -------------------- --- ---------- -
--------------------------------------------- -------- -- -
---------------- -- ----- --- ---- --------- --- ----- -----------
---
- ---- -
---------------- -- ----- --- ----- ----------
-
------------------------------- -------- -- -
---------------- --------- --- ----------
---
---------
-------
-------在这个示例中，我们首先检查文档是否还在加载中，如果是则监听 DOMContentLoaded 事件以便在 DOM 构建完成时运行代码。如果文档已经加载完毕，则直接运行代码。最后，我们还监听了 load 事件以确保所有资源都已加载。
总之，在没有使用现代 UI 框架的情况下，我们需要手动编写代码来检查 DOM 是否就绪。可以使用 document.readyState 属性或 DOMContentLoaded 和 load 事件来实现这一点。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/14689