在前端开发中，js代码执行时如果对应的html元素还没有被解析加载，就会出现无法获取dom节点、操作失效等问题，因此需要掌握让js在html加载完成后再运行的方法。
常见的实现方法
1. 将script标签放在body底部
浏览器解析html是按照从上到下的顺序执行的，把script标签放在body标签的结束位置之前，此时html的主体内容已经加载完成，js代码执行时就可以正常获取到对应的dom元素。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>示例页面</title>
</head>
<body>
<div id="content">测试内容</div>
<!-- 将script放在body底部 -->
<script>
// 此时div已经加载完成，可以正常获取
const div = document.getElementById('content');
console.log(div.innerText); // 输出：测试内容
</script>
</body>
</html>
2. 使用DOMContentLoaded事件
DOMContentLoaded事件会在html文档被完全加载和解析完成后触发，不需要等待样式表、图片等外部资源加载完成，比window.onload执行时机更早，适合只需要操作dom的场景。
// 监听DOMContentLoaded事件
document.addEventListener('DOMContentLoaded', function() {
const btn = document.getElementById('btn');
console.log('DOM加载完成，按钮元素：', btn);
});
// 也可以写成箭头函数形式
document.addEventListener('DOMContentLoaded', () => {
console.log('DOM解析完成，可以执行js逻辑');
});
3. 使用window.onload事件
window.onload事件会在整个页面包括html、样式表、图片、iframe等所有资源都加载完成后才会触发，如果页面有大量图片等资源，触发时机比较晚，适合需要操作所有资源的场景。
window.onload = function() {
const img = document.getElementById('banner');
console.log('页面所有资源加载完成，图片宽度：', img.width);
};
// 注意：如果多次赋值window.onload，后面的会覆盖前面的
// 如果需要绑定多个事件，建议使用addEventListener
window.addEventListener('load', () => {
console.log('页面全部加载完成');
});
不同方法的差异对比
我们可以通过下面的表格来直观对比几种方法的区别：
| 方法 | 触发时机 | 适用场景 |
|---|---|---|
| script放在body底部 | html主体解析完成后 | 简单页面，不需要考虑复杂加载逻辑 |
| DOMContentLoaded事件 | html文档解析完成，不等待外部资源 | 只需要操作dom元素的场景 |
| window.onload事件 | 所有页面资源加载完成 | 需要操作图片、样式表等外部资源的场景 |
注意事项
- 如果使用
defer属性的script标签，脚本会在html解析完成后、DOMContentLoaded事件触发前执行，也可以实现html加载完再运行js的效果，写法如下：
<script src="main.js" defer></script>
- 不要同时使用多种方法做重复的逻辑，避免代码重复执行。
- 如果js代码需要操作动态加载的html内容，需要在内容加载完成后再执行对应的逻辑，不能依赖页面初始加载完成的事件。
实际开发中，优先推荐使用DOMContentLoaded事件或者defer属性的方式，既不需要调整script标签的位置，也能保证js在合适的时机执行，兼容性也比较好。
HTMLJavaScriptdom_readyDOMContentLoadedwindow_onload修改时间：2026-07-15 00:54:20