HTML加载完成后执行JS的几种方法

本文详解了四种确保JavaScript在HTML加载完成后安全执行的实用方法：利用DOMContentLoaded事件精准响应DOM就绪、将script标签置于body底部实现简单可靠、通过window.onload等待全部资源（如图片）加载完毕，以及为外链脚本合理选用defer（保序推荐）或async（独立异步）属性；无论项目简单或复杂，都能根据实际需求选择最合适的时机运行JS，避免因执行过早导致DOM操作失败——看似基础，却是前端开发中不容忽视的关键细节。

要在HTML加载完成后运行JavaScript，关键在于确保JS代码不会在页面元素还未生成时就执行。以下是几种常用且有效的方法。

1. 使用 DOMContentLoaded 事件

适合大多数需要操作DOM的场景。

document.addEventListener('DOMContentLoaded', function () {
  // 在这里写你的JS代码
  console.log('HTML已加载完成');
  // 比如操作某个元素
  const element = document.getElementById('myDiv');
  if (element) {
    element.style.color = 'red';
  }
});

2. 将 script 标签放在 body 底部

• defer：脚本延迟执行，在HTML解析完成后按顺序运行，保证执行时机在DOM构建之后。
• async：脚本异步加载，加载完成后立即执行，不保证顺序，通常用于独立脚本（如统计代码）。

<!-- 推荐用于模块化JS -->
<script src="app.js" defer></script>

基本上就这些。根据你的项目需求选择合适的方式：简单页面用底部 script，复杂逻辑用 DOMContentLoaded，带资源依赖用 load，外联JS加 defer。不复杂但容易忽略细节。

终于介绍完啦！小伙伴们，这篇关于《HTML加载完成后执行JS的几种方法》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！