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 事件可能会显著延迟你的代码的执行，因为它需要等待所有外部资源都加载完成。
