怎么把html加载完了在运行js_html加载完运行js方法【教程】

答案：确保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 底部

把 标签放在