DOM 就绪 JS - JavaScript

简介

DOM (Document Object Model) 是 JavaScript 处理 HTML 和 XML 文件的标准 API。当 HTML 页面被加载时，浏览器会生成一个文档对象模型树 (DOM Tree)，用于表示文档中的元素、属性和文本内容等。DOM 可以让 JavaScript 动态地修改 HTML 内容和样式，并对用户事件做出响应。

在某些情况下，我们需要在 DOM 就绪后再对其进行操作。例如，当我们需要操作某个 HTML 元素的内容或样式时，首先需要确保该元素已经被加载到 DOM 中。为此，我们可以使用 DOM 就绪技术来等待 DOM 的加载完成。

DOM 就绪技术

1. window.onload

window.onload 事件会在页面加载完成后触发。当浏览器加载所有的 HTML、CSS、JS 文件时，window.onload 事件就会被触发。我们可以在该事件中执行 DOM 操作，或者执行其他 JavaScript 代码。

示例：

window.onload = function() {
  // 执行 DOM 操作
};

2. document.readyState

document.readyState 属性表示文档加载状态，具体值如下：

• "loading"：文档的解析及资源加载正在进行中。
• "interactive"：文档已经解析完成，但是一些资源如图片、样式表等还在加载中。
• "complete"：文档和所有资源已经加载完成。

我们可以使用 document.readyState 属性来判断 DOM 是否已经就绪。

示例：

if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', function() {
    // DOM 就绪后的回调函数
  });
} else {
  // DOM 已经就绪，直接执行回调函数
}

3. DOMContentLoaded 事件

DOMContentLoaded 事件会在 DOM 就绪后触发。当 HTML 页面被解析完成，但其它资源如图片、样式表等还在加载中时，DOMContentLoaded 事件就会被触发。我们可以在该事件中执行 DOM 操作，或者执行其他 JavaScript 代码。

示例：

document.addEventListener('DOMContentLoaded', function() {
  // 执行 DOM 操作
});

总结

DOM 就绪技术可以让我们在 DOM 加载完成后再进行相关操作，避免在 DOM 加载中或加载完成前执行时出现问题。常见的 DOM 就绪技术包括 window.onload、document.readyState 和 DOMContentLoaded 事件。我们可以根据实际情况选择合适的技术实现 DOM 就绪。