判断页面是否加载完成是前端开发中常见的需求，尤其是在进行DOM操作前，我们需要确认DOM结构已经完全加载并解析完毕。本文介绍了如何使用纯JavaScript代码检测DOM是否加载完成，提供了相关的知识点和示例代码。
1. readyState属性与文档状态
document对象的readyState属性可以返回当前文档的状态。这个属性主要有四个可能的值，分别代表了页面加载的不同阶段：
- uninitialized：尚未开始加载
- loading：加载中
- interactive：已加载，文档可以与用户交互，但可能有其他的资源还未加载完成（如图片、样式表等）
- complete：加载完成，所有资源（包括图片、脚本文件、样式表等）都已经加载完成
通过检查这个属性，我们可以编写条件判断语句，根据不同的加载状态来执行相应的操作。例如：
```javascript
var readyState = document.readyState;
if (readyState === 'interactive' || readyState === 'complete') {
// DOM已准备好，可以安全执行操作
} else {
// DOM还未准备好，需要等待
}
```
2. DOMContentLoaded事件
DOMContentLoaded事件会在DOM完全加载并解析完成后触发，而不必等待样式表、图片和子框架的加载完成。使用此事件可以更早地进行DOM操作，而不必等到整个页面的全部内容加载完毕。使用方法如下：
```javascript
document.addEventListener('DOMContentLoaded', function() {
// 这里的代码会在DOM完全加载后执行
console.log('DOM fully loaded and parsed');
});
```
3. onload事件
与DOMContentLoaded事件不同，onload事件会在整个页面的资源（包括DOM、样式表、图片、flash等）完全加载完成后触发。这意味着onload事件标志着整个页面加载的结束。它适合用来执行依赖于页面全部资源加载完成后的操作，比如页面渲染完成后需要执行的某些初始化操作。示例代码如下：
```javascript
window.onload = function() {
// 这里的代码会在所有资源加载完成后执行
console.log('Page fully loaded');
};
```
4. 混合使用readyState、DOMContentLoaded和onload事件
由于不同的事件触发时机不同，我们可以结合使用它们来实现更复杂的加载完成检测。例如，我们可以在interactive或complete状态下同步执行回调函数，而在页面的其他资源加载完成时通过onload事件异步执行回调函数。一个混合使用的示例代码如下：
```javascript
function onReady(fn) {
var readyState = document.readyState;
if (readyState === 'interactive' || readyState === 'complete') {
fn();
} else {
window.addEventListener("DOMContentLoaded", fn);
}
}
// DOM已完全加载和解析后执行
onReady(function() {
console.log('DOM fully loaded and parsed');
});
// 页面资源完全加载后执行
window.onload = function() {
console.log('Page fully loaded');
};
```
5. 注意事项
在使用以上方法时需要注意，不同浏览器可能对这些事件的支持程度不一致。在老旧的浏览器中，DOMContentLoaded事件可能不受支持，所以在使用前最好做一下兼容性检测。另外，在某些情况下，如果脚本文件在DOM加载前被加载并执行，可能会遇到一些额外的问题，因为那时候DOM元素可能还没有准备好。因此，在编写JavaScript代码时，需要注意脚本文件的加载位置，最好将相关脚本文件放置在HTML文档的底部。
总结来说，本文介绍了如何使用纯JavaScript来检测DOM加载完成的各种技术手段，通过这些技术的合理运用，可以确保我们对DOM的操作在正确的时机执行，提高网页的用户体验。
