深入理解HTML文档被完全加载和解析完成

当我们说"HTML文档被完全加载和解析完成"时，这指的是浏览器已经完成了以下关键步骤：

HTML文档的下载：浏览器从服务器获取完整的HTML文件内容。
HTML文档的解析：浏览器逐行解析HTML代码，识别标签、属性和文本内容。
DOM树的构建：浏览器根据解析的结果，在内存中构建出完整的文档对象模型(DOM)树结构。

DOM树构建完成的标志

DOMContentLoaded事件触发的核心标志是：

浏览器已经处理了所有HTML标记。
所有DOM元素都已创建并添加到DOM树中。
所有内联脚本（不包含defer或async属性的脚本）已经执行完成。
文档的readyState属性值变为interactive。

与资源加载的区别

需要特别注意的是，"HTML文档被完全加载和解析完成"不包括以下内容：

外部CSS样式表的加载和解析。
图像、视频、音频等媒体资源的加载。
外部字体文件的加载。
子框架(iframe)内容的加载和解析。

实际意义

这就是为什么我们说DOMContentLoaded事件比load事件更早触发的原因。它允许我们在页面视觉上完全呈现之前，就开始操作DOM元素，从而提高用户体验和页面交互的响应速度。

示例说明

document.addEventListener('DOMContentLoaded', function() {
    // 获取所有复选框容器
    const labelContainer = document.querySelectorAll('.dmi-label');
    
    // 这里可以安全地操作DOM元素，因为它们都已存在
    // 即使页面上的图片可能还在加载中
});

在这个例子中，当DOMContentLoaded事件触发时，浏览器已经确保.dmi-label元素存在于DOM树中，即使页面上的其他资源（如图片）可能仍在加载。这就是为什么我们可以安全地使用querySelectorAll来获取这些元素并添加事件监听器。