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

想要确保JavaScript在HTML页面加载完成后运行，避免因DOM未加载而导致的错误？本文为您提供四种实用方法：**1. DOMContentLoaded事件**，在HTML解析完毕后立即执行，适合操作DOM；**2. 将script标签置于body底部**，简单直接，确保HTML先加载；**3. window.onload**，等待所有资源（包括图片）加载完毕后执行；**4. 外链JS使用defer或async属性**，推荐使用defer保证脚本按顺序执行。选择哪种方法取决于您的具体需求。阅读本文，掌握HTML加载后运行JS的关键技巧，提升网页性能和用户体验！

答案：确保JS在HTML加载后执行的方法有四种。1. 使用 DOMContentLoaded 事件，适合操作DOM；2. 将 script 标签置于 body 底部，简单直接；3. 使用 window.onload，等待所有资源加载完成；4. 外链JS使用 defer 或 async 属性，推荐 defer 以保证执行顺序。根据需求选择合适方式即可。

要在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学习网公众号！