DOM操作获取HTML元素打印到控制台返回null该如何解决

问题原因 #

你将 <script src="script.js"></script> 放在了 <head> 标签内，浏览器加载页面时按从上到下的顺序解析代码，执行JS代码时 <body> 内的DOM节点还未渲染，因此querySelector找不到目标元素返回null，普通文本打印不依赖DOM所以可以正常输出，该问题和浏览器本身无关，无需重装浏览器。

解决方案 #

你可以任选以下任意一种方法修复：

• 方案1：将script标签移动到</body>结束标签之前，确保DOM加载完成后再执行JS
  示例代码：

  <!-- 此处保留body内所有原有代码 -->
    </main>
    <script src="script.js"></script>
  </body>
  

• 方案2：给head内的script标签添加defer属性，该属性会让JS自动等待DOM全部加载完成后再执行
  示例代码：

  <script src="script.js" defer></script>
  

• 方案3：将所有需要操作DOM的JS代码包裹在DOMContentLoaded事件回调中，确保DOM加载完成后才执行对应逻辑
  示例代码：

  "use strict";
  document.addEventListener('DOMContentLoaded', function() {
    console.log(document.querySelector("#message"));
    console.log("hi");
  });
  

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