外部JavaScript文件报错TypeError: elem is null，如何解决？

这个问题我之前开发时也踩过坑！核心原因很简单：当外部JavaScript文件被加载执行时，页面里的DOM元素还没完全渲染出来，所以document.getElementById("demo")找不到目标元素，只能返回null，自然就触发类型错误了。而内嵌JS能正常运行，是因为内嵌代码是在DOM元素定义之后才执行的。

下面给你几个靠谱的解决方案：

• 方案一：把外部script标签放到body最底部
  这是最直接简单的办法，让浏览器先把所有DOM元素渲染完毕，再加载执行JS代码。修改后的HTML结构如下：

  <!DOCTYPE html>
  <html>
  <body>
    <h2>My First Page</h2>
    <p id="demo"></p>
  
    <!-- 把外部script放在</body>之前 -->
    <script src="script.js"></script>
  </body>
  </html>
  

  你的script.js保持原代码不变即可：

  var elem = document.getElementById("demo");
  elem.innerHTML = "Hello World!";
  

• 方案二：监听DOMContentLoaded事件
  如果因为某种原因不能把script标签放到底部，那就让JS代码等DOM加载完成后再执行。修改script.js如下：

  document.addEventListener('DOMContentLoaded', function() {
    // 这里的代码会在DOM完全加载后执行
    var elem = document.getElementById("demo");
    elem.innerHTML = "Hello World!";
  });
  

  这种方式不管你的script标签放在<head>还是<body>里，都能保证代码在DOM准备好后才运行，适用性更强。

• 方案三：使用window.onload（不推荐优先用）
  这个方法会等页面所有资源（包括图片、样式表、音频等）都加载完成后才执行代码，比DOMContentLoaded触发时机晚，如果你只是操作DOM的话，没必要等这么久。代码示例：

  window.onload = function() {
    var elem = document.getElementById("demo");
    elem.innerHTML = "Hello World!";
  };
  

个人推荐优先用方案一或者方案二，前者简单直观，后者更灵活适配复杂场景。

内容的提问来源于stack exchange，提问作者Black US