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 底部

window.onload = function () {
  console.log('页面所有资源都已加载完成');
  // 可安全操作图片尺寸等
  const img = document.getElementById('myImage');
  console.log(img.naturalWidth);
};