在前端开发中，我们经常需要在页面 DOM 加载完成后再执行一些 JavaScript 操作。为了实现这个目标，我们可以使用 DOMContentLoaded 事件。
什么是 DOMContentLoaded？
DOMContentLoaded 是一个 DOM 事件，当 HTML 文档被完全加载和解析后触发。此时 DOM 树已经构建完毕，但是可能还有其他资源（如图片和样式表）未加载完成。
与 load 事件不同，DOMContentLoaded 事件在页面的资源（如图片、视频等）加载完成前就会触发。这使得我们可以更早地开始执行 JavaScript 代码，从而提高网站的响应速度和性能。
如何使用 DOMContentLoaded？
要监听 DOMContentLoaded 事件，我们可以使用以下代码：
document.addEventListener("DOMContentLoaded", function() {
// 在这里编写你的 JavaScript 代码
});在上面的代码中，我们使用 addEventListener() 方法来向 document 对象注册 DOMContentLoaded 事件的监听器函数。一旦页面完成加载和解析，该函数就会被调用。
需要注意的是，如果文档已经完全加载和解析，那么 DOMContentLoaded 事件将不会再次触发。因此，如果您的 JavaScript 代码依赖于 DOM 元素，请确保将其放在 DOMContentLoaded 事件的回调函数中。
示例代码
下面是一个简单的示例，演示如何使用 DOMContentLoaded 事件来加载外部 JavaScript 文件：
-- -------------------- ---- -------
--------- -----
------
------
---------- ----- ---------------
------- ---------------------------
-------
------
---------- -----------
-------
-------在上面的代码中，我们在页面头部引入了一个名为 myscript.js 的 JavaScript 文件。在该文件中，我们可以编写一些需要在 DOM 加载完成后执行的 JavaScript 代码：
document.addEventListener("DOMContentLoaded", function() {
console.log("DOM is ready!");
});在这个示例中，console.log() 函数将在页面加载并解析完毕后执行，并输出一条消息到浏览器的开发者控制台。
结论
DOMContentLoaded 事件是一个非常有用的工具，可以帮助我们更好地控制和优化网站的性能。通过使用它，我们可以确保 JavaScript 代码仅在 DOM 构建完成后才运行，从而避免因 DOM 尚未准备就绪而导致的错误和问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/14768