📌  相关文章
📜  ondomcontentloaded javascript(1)

📅  最后修改于: 2023-12-03 14:44:53.304000             🧑  作者: Mango

JavaScript中的DOMContentLoaded事件

在JavaScript中，当文档中的DOM（文档对象模型）已经完成解析而且可以被操作时，将触发 DOMContentLoaded 事件。这个事件对于需要在页面DOM加载完成后执行代码的开发者非常有用。以下是对该事件的详细介绍：

DOMContentLoaded 事件的基础知识

在JavaScript中，当页面中的DOM已经解析完成并可以被操作时，会发生 DOMContentLoaded 事件。这意味着如果在HTML加载完成之前尝试操作DOM，将会抛出错误。

代码片段
document.addEventListener('DOMContentLoaded', function() {
  // DOMContentLoaded 事件被触发时的代码
});
示例
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example</title>
</head>
<body>
  <div id="example">Example</div>
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      var example = document.getElementById('example');
      example.style.color = 'red';
    });
  </script>
</body>
</html>

在上面的例子中， DOMContentLoaded 事件被用来获取页面中的元素并进行操作。当 DOMContentLoaded 事件被触发时，页面中的内容已经加载完成，可以安全地操作DOM，例如通过getElementById获取元素并改变其style属性。

DOMContentLoaded vs. load

DOMContentLoaded 事件与 window 对象的 load 事件类似，但它们之间有很大的区别。load 事件表示页面中的所有内容，包括图像和CSS文件等，都已经完全加载完成。而 DOMContentLoaded 事件只表示DOM已经加载完成，这意味着用户能够操作页面并与之交互。因此，如果需要使用页面中的样式表或图像等资源，请使用 window.onload 代替 DOMContentLoaded 。

代码片段
window.addEventListener('load', function() {
  // 当所有资源都加载完成时，执行代码
});
总结

DOMContentLoaded 事件可以在页面DOM加载完成后执行代码，使开发者能够安全达到DOM并进行操作。与 window.onload 事件相比， DOMContentLoaded 事件更加轻量级，因为它只在DOM完成解析时触发，而不必等待页面中所有内容（例如图像和样式表等）都加载完成。