在没有框架的情况下了解 DOM 准备情况

开发 Web 应用程序时，确定文档对象模型 (DOM) 何时准备好进行操作至关重要。虽然像 jQuery 这样的框架提供了 readyState 侦听器，但本文探讨了检测 DOM 就绪情况的替代方法。

直接访问 DOM State

您可以直接访问 DOM State，而不是依赖框架，您可以直接访问 DOM 状态。检查文档的readyState属性：

if (document.readyState === 'complete') {
  // DOM is ready
}

但是，这种方法在浏览器中并不可靠，因为有些浏览器可能无法提供准确的readyState值。

基于事件的DOM就绪检查

一种更跨浏览器的方法是监听 DOMContentLoaded 事件，该事件在 DOM 准备好时触发操作：

function fireOnReady() {
  // ...
}
if (document.readyState === 'complete') {
  fireOnReady();
} else {
  document.addEventListener("DOMContentLoaded", fireOnReady);
}

利用 jQuery 未记录的 isReady 属性

尽管未记录，jQuery 公开了一个 isReady 属性，该属性在内部指示 DOM 就绪状态：

if ($.isReady) {
  // DOM is ready
} else {
  // DOM is not yet ready
}

轻量级 DOM Ready 片段

受 Dustin Diaz 片段的启发，您可以创建一个迷你 DOM 就绪监听器，如下所示：

if (!/in/.test(document.readyState)) {
  // Document is ready
} else {
  // Document is not ready
}

此检查利用了以下事实：readyState 值在早期加载状态中包含“in”，使其成为 DOM 就绪情况的可靠指示器。