DOM 已加载 - JavaScript

什么是 DOM？

DOM (Document Object Model) 是一个 web 页面的编程接口，它允许 JavaScript 对页面的内容进行操作或修改。DOM 将整个文档解析成一个文档树，文档中的每个元素变成一个节点，开发者可以使用 JavaScript 操作这些节点，改变文档结构，内容和样式。

DOM 的状态

DOM 可以分为两个状态：

• 执行状态：文档已加载，且 JavaScript 代码正在执行。

• 就绪状态：文档已加载，但是 JavaScript 代码还未执行。

DOMContentLoaded 事件

DOMContentLoaded 事件是当文档的初始 HTML 文档完全加载和解析完成之后（不包括样式表，图像和子框架的加载），即 DOM 就绪时触发的事件。

document.addEventListener('DOMContentLoaded', function() {
  // code to execute when DOM is ready
});

window.onload 事件

window.onload 事件是当整个页面（包括图像，样式表和子框架）完全加载后，即页面完成加载时触发的事件。

window.onload = function() {
  // code to execute when page is fully loaded
};

区别

DOMContentLoaded 会比 window.onload 更早触发，主要是因为 window.onload 会等待所有资源加载完成，包括图像，样式表和子框架。而DOMContentLoaded 事件则是在 HTML 和 JavaScript 都已经被加载解析之后触发的。因此，在一些情况下对于执行 JavaScript 代码的时间更加敏感的情况下，使用 DOMContentLoaded 事件会更为合适。

结论

DOM 的状态很重要，它们在 JavaScript 的执行过程中具有不同的作用。了解 DOMContentLoaded 和 window.onload 的区别对于编写更加高效的 JavaScript 代码或优化页面性能至关重要。