答案：确保JS在HTML加载后执行的方法有四种。1. 使用 DOMContentLoaded 事件，适合操作DOM；2. 将 script 标签置于 body 底部，简单直接；3. 使用 window.onload，等待所有资源加载完成；4. 外链JS使用 defer 或 async 属性，推荐 defer 以保证执行顺序。根据需求选择合适方式即可。
要在HTML加载完成后运行JavaScript，关键在于确保JS代码不会在页面元素还未生成时就执行。以下是几种常用且有效的方法。
1. 使用 DOMContentLoaded 事件
当HTML文档完全加载和解析完毕后，会触发DOMContentLoaded 事件，此时无需等待样式表、图片等资源加载完成。适合大多数需要操作DOM的场景。
document.addEventListener('DOMContentLoaded', function () {
// 在这里写你的JS代码
console.log('HTML已加载完成');
// 比如操作某个元素
const element = document.getElementById('myDiv');
if (element) {
element.style.color = 'red';
}
});
2. 将 script 标签放在 body 底部
把<script> 标签放在 </body> 之前，这样浏览器会先加载完所有HTML再执行JS。这是最简单直接的方式，适用于简单的页面。
<!DOCTYPE html>
<html>
<head>
<title>页面标题</title>
</head>
<body>
<div id="myDiv">我是内容</div>
<p><!-- JS 放在 body 结束前 -->
<script>
const element = document.getElementById('myDiv');
element.style.fontSize = '20px';
</script>
</body>
</html>
3. 使用 window.onload
如果JS依赖图片或其他外部资源（比如轮播图、Canvas绘图），可以使用window.onload，它会在所有资源加载完成后执行。注意：它比 DOMContentLoaded 更晚触发。
立即学习“前端免费学习笔记（深入）”；
window.onload = function () {
console.log('页面所有资源都已加载完成');
// 可安全操作图片尺寸等
const img = document.getElementById('myImage');
console.log(img.naturalWidth);
};
4. 使用 async 和 defer 属性（推荐用于外链JS）
对于通过<script src="...js"></script> 引入的外部脚本：- defer：脚本延迟执行，在HTML解析完成后按顺序运行，保证执行时机在DOM构建之后。
- async：脚本异步加载，加载完成后立即执行，不保证顺序，通常用于独立脚本（如统计代码）。
<!-- 推荐用于模块化JS --> <script src="app.js" defer></script>
基本上就这些。根据你的项目需求选择合适的方式：简单页面用底部 script，复杂逻辑用 DOMContentLoaded，带资源依赖用 load，外联JS加 defer。不复杂但容易忽略细节。
