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

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