JavaScript获取HTML指定id的div元素内容失败求助

这问题我之前踩过坑！核心原因特别明确：你的JavaScript代码在目标div元素还没被浏览器加载到DOM里的时候就执行了，所以document.getElementById("x")找不到元素，返回了null，紧接着访问innerHTML自然就报错了。而你在控制台能成功执行，是因为那时候整个页面的DOM已经完全加载完成，元素早就存在了。

下面给你几个靠谱的解决办法，按需选就行：

• 把script标签放到body末尾
  浏览器是从上到下解析HTML的，把你的script放在div元素之后，就能确保浏览器先创建好div，再执行JS代码。示例代码：

  <body>
    <div id="x">0.576308782559139</div>
    <!-- 把script放在这里 -->
    <script src="你的外部js文件路径.js"></script>
  </body>
  

  这是最简单直接的方案，很多项目里都会这么用。

• 用DOMContentLoaded事件监听
  如果不想调整script的位置，可以在JS代码里监听DOMContentLoaded事件，等DOM树完全构建完成后再执行你的DOM操作。示例代码：

  document.addEventListener('DOMContentLoaded', function() {
    var obj = document.getElementById("x").innerHTML;
    alert(obj);
  });
  

  这个事件只会在DOM加载完成后触发，不管页面的图片、样式表等资源有没有加载完毕，刚好适合处理DOM相关的逻辑。

• 给script标签加defer属性
  如果你是引入外部JS文件，可以给script标签加上defer属性，这样浏览器会在DOM加载完成后再执行这个脚本，同时不会阻塞HTML的解析。示例代码：

  <script src="你的外部js文件路径.js" defer></script>
  

选其中一种方法试一下，应该就能正常弹出div里的内容了！

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