HTML | DOM跟踪readyState属性

在HTML和JavaScript中，当网页被加载时，浏览器会解释 HTML 和 JavaScript 代码并创建 DOM (文档对象模型)。 readyState 属性用于表示 DOM 是否已经完全加载。本文将介绍如何跟踪 readyState 属性。

简介

readyState 属性是 Document 对象的属性。它提供了当前文档所处状态的信息。readyState属性有4个值：

• loading：文档正在加载。
• interactive：文档已被解析，但是子资源例如图片、样式表等还在加载。
• complete：文档和所有子资源已经加载完毕。此时会触发 DOMContentLoaded 事件。
• uninitialized：尚未启动文档加载。

跟踪示例

在 JavaScript 中，可以通过 document.readyState 属性来获取文档的当前状态。例如，以下代码将显示文档当前状态的弹窗：

switch (document.readyState) {
    case 'loading':
        alert('文档正在加载');
        break;
    case 'interactive':
        alert('文档已被解析，但是子资源还未加载');
        break;
    case 'complete':
        alert('文档和所有子资源已经加载完毕');
        break;
    default:
        alert('未知状态');
        break;
}

在某些情况下，我们需要等到文档完全加载后再执行某个操作。此时，可以使用 DOMContentLoaded 事件。该事件在文档完全加载完成后触发。

document.addEventListener('DOMContentLoaded', function() {
    console.log('文档已完全加载');
});

结论

readyState 属性为我们提供了 DOM 当前状态的信息，以便合理地处理文档加载的不同阶段。使用 DOMContentLoaded 事件，可以在文档完全加载后执行某些操作。