DOMContentLoaded 事件

DOMContentLoaded 事件是 DOM（文档对象模型）完全加载和解析完成的事件，但不需要等待样式表、图片和子框架的完成加载。换句话说，当文档的 HTML 被完全加载和解析完成之后，就会触发 DOMContentLoaded 事件，此时 DOM 树已经完全构建，但可能还未加载完所有的外部资源（如样式表和图片）。

这个事件对于执行依赖于 DOM 的 JavaScript 代码非常有用，因为它确保了你的脚本在尝试访问 DOM 元素之前，这些元素已经存在于页面上。

如何使用 DOMContentLoaded

你可以通过为 document 对象添加事件监听器来监听 DOMContentLoaded 事件。一旦事件被触发，你的回调函数就会被执行。

document.addEventListener('DOMContentLoaded', function() {  
  // 你的代码可以在这里安全地运行  
  // 因为此时 DOM 已经完全加载和解析  
  console.log('DOM 完全加载和解析完成！');  
  
  // 例如，你可以在这里安全地获取 DOM 元素  
  var myElement = document.getElementById('myElementId');  
  if (myElement) {  
    // 对 myElement 进行操作  
  }  
});

注意事项

• 使用 DOMContentLoaded 事件可以显著提高页面加载的性能，因为它允许你的脚本尽早执行，而不需要等待所有的外部资源都加载完成。
• 在某些情况下，如果你只需要等待某个特定的脚本或样式表加载完成，你可能需要使用更具体的事件或加载机制（如动态脚本加载的回调函数）。
• 在一些旧的浏览器中，DOMContentLoaded 事件可能不受支持。但是，在现代浏览器中，它得到了广泛的支持。
• 如果你需要在页面完全加载后（包括所有的外部资源，如图片、样式表和脚本）执行代码，你应该监听 window 的 load 事件，而不是 DOMContentLoaded 事件。但是，请注意，load 事件可能会显著延迟你的代码的执行，因为它需要等待所有外部资源都加载完成。