当网页中的DOM(文档对象模型)结构加载完成后,浏览器会触发 DOMContentLoaded 事件

5 min read

当网页中的DOM(文档对象模型)结构加载完成后,浏览器会触发 DOMContentLoaded 事件。这个事件表示文档已经被完全解析和加载,但是其他资源(例如图片和样式表)可能仍然在加载中。

可以使用JavaScript代码来监听 DOMContentLoaded 事件,例如:

document.addEventListener('DOMContentLoaded', function() {
  // DOM结构已经加载完成,可以进行操作
});

在这个事件的回调函数中,可以进行与DOM相关的操作,例如添加事件监听器或修改DOM元素。

需要注意的是,与 window.onload 事件不同的是,DOMContentLoaded 事件不需要等到所有的资源都加载完成才会触发。这意味着可以更早地访问和操作DOM元素,提高网页的响应速度和用户体验。但是需要注意的是,如果在回调函数中操作了还未加载完成的资源,可能会出现错误或异常行为。因此,在使用 DOMContentLoaded 事件时,需要根据实际情况来决定何时进行DOM操作。