Vanilla JS如何等待目标HTML元素加载完成后执行代码

嘿，这个问题我太熟了——很多刚接触原生JS的朋友都会碰到脚本跑太快、找不到目标元素的坑！针对你要获取document.getElementById("heading")的需求，我给你列几个Vanilla JS里最靠谱的方案，按推荐优先级排序：

1. 把脚本放在HTML末尾（最基础也最稳妥的选择） #

浏览器是从上到下解析HTML的，把你的<script>标签直接放在</body>闭合标签前面，这时候整个DOM已经加载完成了，直接获取元素根本不会有问题。

示例代码：

<body>
  <!-- 你的页面内容 -->
  <h1 id="heading">Hello World</h1>
  
  <!-- 脚本放在这里 -->
  <script>
    this.heading = document.getElementById("heading");
    // 接下来写你要执行的代码
  </script>
</body>

优点：零额外JS逻辑，性能最好，完全不需要担心时机问题。
缺点：如果是外部脚本文件，会稍微延迟加载，但绝大多数场景下完全可以接受。

2. 用DOMContentLoaded事件（适合脚本必须放头部的场景） #

如果因为某些原因，你的脚本必须放在HTML头部，那DOMContentLoaded事件就是绝佳选择——它会在DOM完全解析完成后立即触发，不会等样式表、图片这些外部资源加载完，刚好匹配你的需求。

示例代码：

document.addEventListener('DOMContentLoaded', function() {
  this.heading = document.getElementById("heading");
  // 所有需要等待元素加载的代码都写在这里
});

优点：灵活性拉满，不管脚本放在哪里，都能保证DOM就绪后再执行代码。
补充：如果DOM已经加载完成才绑定这个事件，回调函数会立刻执行，完全不用担心错过时机。

3. 用MutationObserver（处理动态生成的元素） #

如果你的heading元素是通过AJAX、框架渲染或者其他JS操作动态添加到DOM里的，上面两种方法就不管用了。这时候MutationObserver可以帮你监听DOM的变化，直到目标元素出现为止。

示例代码：

function waitForElement(selector, callback) {
  // 先检查元素是否已经存在
  const element = document.querySelector(selector);
  if (element) {
    callback(element);
    return;
  }

  // 创建观察者，监听DOM变化
  const observer = new MutationObserver(function(mutations) {
    const element = document.querySelector(selector);
    if (element) {
      callback(element);
      observer.disconnect(); // 找到元素后立刻停止监听，避免浪费资源
    }
  });

  // 开始监听body及其子元素的变化
  observer.observe(document.body, {
    childList: true,
    subtree: true
  });
}

// 调用这个方法
waitForElement('#heading', function(element) {
  this.heading = element;
  // 这里写拿到元素后的操作
});

优点：完美适配动态生成的元素，精准且高效。
缺点：比前两种方法复杂一丢丢，适合特殊场景使用。

4. setInterval轮询（不推荐，仅作备选） #

这个方法就是每隔一段时间检查一次元素是否存在，找到后就清除定时器。虽然能用，但效率很低，会一直消耗资源，所以除非万不得已，尽量别用。

示例代码：

const checkInterval = setInterval(function() {
  const heading = document.getElementById("heading");
  if (heading) {
    this.heading = heading;
    clearInterval(checkInterval);
    // 后续代码
  }
}, 100); // 每100毫秒检查一次

最后总结一下： #

• 如果元素是静态写在HTML里的：优先选方案1或方案2；
• 如果元素是动态生成的：直接用方案3；
• 方案4尽量避免，性能和体验都不如前面的方法。

内容的提问来源于stack exchange，提问作者jhonathan myers